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文件就可以使用啦！