vue中axios請求的封裝

時間 2019-11-08

標籤 vue axios 請求封裝欄目軟件設計简体版

原文原文鏈接

axios

Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中, 也是vue官方推薦使用的http庫；封裝axios，一方面爲了之後維護方便，另外一方面也能夠對請求進行自定義處理前端

安裝

npm i axiosvue

封裝

我把axios請求封裝在http.js中，從新把get請求，post請求封裝了一次node

首先，引入axiosios

import axios from 'axios'
複製代碼

設置接口請求前綴

通常咱們開發都會有開發、測試、生產環境，前綴須要加以區分，咱們利用node環境變量來做判斷，npm

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}
複製代碼

在localhost調試時，直接用開發地址通常都會有跨域的問題，因此咱們還須要配置代理編程

本項目是vue cli3搭建的，代理配置是在vue.config.js文件中:axios

module.exports = {
  devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }
}
複製代碼

這樣就成功把/proxyApi 指向了 'http://dev.xxx.com'，重啓服務api

修改一下http.js中的配置跨域

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/proxyApi'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}
複製代碼

攔截器

接着設置超時時間和請求頭信息promise

axios.defaults.timeout = 10000
// 請求頭信息是爲post請求設置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
複製代碼

axios很好用，其中之一就是它的攔截器十分強大，咱們就能夠爲請求和響應設置攔截器，好比請求攔截器能夠在每一個請求里加上token，作了統一處理後維護起來也方便，響應攔截器能夠在接收到響應後先作一層操做，如根據狀態碼判斷登陸狀態、受權。

// 請求攔截器
axios.interceptors.request.use(
  config => {
    // 每次發送請求以前判斷是否存在token
    // 若是存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登陸狀況，此處token通常是用戶完成登陸後儲存到localstorage裏的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })
// 響應攔截器
axios.interceptors.response.use(response => {
  // 若是返回的狀態碼爲200，說明接口請求成功，能夠正常拿到數據
  // 不然的話拋出錯誤
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未受權調取受權接口
    } else if (response.data.code === 510) {
      // 未登陸跳轉登陸頁
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 咱們能夠在這裏對異常狀態做統一處理
  if (error.response.status) {
    // 處理請求失敗的狀況
    // 對不一樣返回碼對相應處理
    return Promise.reject(error.response)
  }
})

複製代碼

get post的封裝

httpGet: 一個參數是請求的url,一個就攜帶的請求參數，返回promise對象

// get 請求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

複製代碼

httpPost: 原理和get差很少，須要注意，這裏多了個data參數，post請求提交前須要對它進行序列號操做，這裏是經過transformRequest作處理；另外兩個參數url,params和get請求的同樣；

// post請求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 發送的數據
      data,
      // url參數
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}
複製代碼

如何使用

我把全部的接口調用都在api.js文件中

先引入封裝好的方法，再在要調用的接口從新封裝成一個方法暴露出去

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

複製代碼

在頁面中能夠這樣調用：

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})
複製代碼

這樣能夠把api統一管理起來，之後維護修改只須要在api.js文件操做便可。

完整代碼

最後貼上完整代碼

// http.js
import axios from 'axios'

// 環境的切換
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/proxyApi'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

// 請求攔截器
axios.interceptors.request.use(
  config => {
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

axios.defaults.timeout = 10000

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 響應攔截器
axios.interceptors.response.use(response => {
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未受權調取受權接口
    } else if (response.data.code === 510) {
      // 未登陸跳轉登陸頁
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 咱們能夠在這裏對異常狀態做統一處理
  if (error.response.status) {
    // 處理請求失敗的狀況
    // 對不一樣返回碼對相應處理
    return Promise.reject(error.response)
  }
})

// get 請求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post請求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 發送的數據
      data,
      // url參數
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}
複製代碼

// api.js
import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

export const save = (data) => {
  return httpPost({
    url: 'apps/wechat/api/save_member',
    data
  })
}
複製代碼

// .vue
<script>
import { getorglist } from '@/assets/js/api'
export default {
  name: 'upload-card',
  data() {},
  mounted() {
    getorglist({ id: 200 }).then(res => {
      // console.log(res)
    })
  },
}
</script>
複製代碼

=========================================================