Vue項目中使用axios配置請求攔截

使用axios配置請求攔截

在vue項目中使用了axios來處理與服務器之間的http請求，項目中引用過 axios 庫之后可以直接使用axios發起請求；

示例 axios 執行 GET 請求

// 為給定 ID 的 user 創建請求,並攜帶 Token
axios.get('/user', {
    params: {
      ID: 12345
    },
　　 heraders:{
　　　　token:xxxxxx
　　 }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

但是，在項目中會有很多接口的調用，每個接口都需要協帶Token，或者當需要修改請求配置的時候需要一個個接口去改，非常麻煩。因此可以通過配置請求的工具類來攔截請求統一請求配置。

axios.create 示例

使用 axios.create 對整個項目的請求重構

// 實例化axios，通過request 來發起 get 請求
const url = '/user/login'
const request = axios.create({
  baseURL: 'http://testuser:8089',
  timeout: 5000
})
request({
  url, 
  method: 'get',
  params: {
    openId: '1234'
  }
})

使用 axios 實例來發起 get 請求時需要傳入請求路徑（url），請求類型（get、post...）,如果有傳參可以用 params 對象傳參

配置axios的請求、響應攔截器 （request.js）

請求攔截器中需要配置請求的超時時間、請求頭中要添加Token、同時對白名單校驗，比如 /login 不需要token 就能發起請求，並實現異常捕獲和自定義處理

響應攔截器中需要對業務信息進行處理

const whiteUrl = [ '/login' ]  // 請求白名單，不需要攜帶 Token 的請求
const url = '/user/login'
const request = axios.create({
  baseURL: 'https://testuser:8089',
  timeout: 5000 // 超時時間
})

// 請求攔截器
request.interceptors.request.use(
  config => {
    const url = config.url.replace(config.baseURL, '')
　　　　// 判斷請求的url是否在白名單中，存在就直接 return config ，不攜帶 Token
      if (whiteUrl.some(wl => url === wl)) {
        return config
      }
    config.headers['token'] = 'xxxxx'
    return config
  },
  error => {
　　 // 將異常返回給用戶處理
    return Promise.reject(error)
  }
)

// 響應攔截器
request.interceptors.response.use(
  response => {
    const res = response.data
　　 // 根據業務中定義的狀態判斷 例如：error_code 為 0 時判定為異常，即將異常返回信息給用戶
    if (res.error_code != 0) {
      return Promise.reject(new Error(res.msg))
    } else {
      return res
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export default request

可以在vue中配置 api文件來管理維護接口

api.js:

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-element-admin/user/login',
    method: 'post',
    data
  })
}

接口過多的話可根據接口功能類型來分類處理，不用都寫在一個api.js文件中

最后在對應調接口的組件中導入對應功能模塊的api文件就可以使用啦！