vue设置axios请求拦截器和响应拦截器

vue项目开发过程中，常见使用axios做api接口请求，那为什么要使用拦截器（interceptor）呢？

拦截器的作用

其实使用拦截器的目的主要是为了对全局接口做一些统一的配置：

• 请求拦截器：主要用来设置全局统一的token（用户权限）、baseURL（接口前缀）、timeout（接口超时时间）等等
• 响应拦截器：主要对接口返回结果分层处理，但在这之前先跟后端约定数据返回格式，比如返回数据的第一层是接口响应状态（失败或成功）的相关信息，在这里就可以统一处理报错信息；到第二层才是接口数据相关信息，下面是常见的接口返回结果格式：

  {
     msg: '数据请求成功!'
     code: 'table',
     status: 200,
     success: true,
     result: {
        pageNo:1,
        pageSize:10,
        list: [{name: "小明", age: 18, scope: 99}, {name: "小红", age: 17, scope: 98}]
     }
  }
  

那么在vue项目中如何设置axios拦截器呢？

单个拦截器

我们首先在项目的公共目录下，比如utils文件夹里，创建request.js，用来放拦截器：

request.js

import axios from 'axios'
import {  Message } from 'element-ui'
import Cookies from 'js-cookie'

//创建axios实例
const service = axios.create（{
    baseURL:  'base-api',
    timeout: 15000
}）
//请求拦截器
service.interceptors.request.use(
    config=>{
        config.headers['Authorization'] = 'Bearer ' + Cookies.get( 'access_token')
        return config
    }, error=>{
        return Promise.reject(error)
    }
）
//响应拦截器
service.interceptors.response.use(
    response=>{
        const res = response.data
        if (!res.success) {
            Message.error(res.msg || '请求错误！')
            return Promise.reject(new Error(res.msg || '请求错误！'))
        }
        return res.result
    },
    error=>{
        Message.error( error.response.msg || error.response.status)
        //这里还可以根据status值（401、500等）分别做对应的处理，比如记录当前请求url，登录以后自动跳转到原url
        return Promise.reject(error)
    }
)
//将实例暴露出去使用
export default service

拦截器写完以后，在api文件中就可以这样使用：

api.js

import request from '@/utils/request'

export default {
    getUserList(params, data) {
        return request({
            url: '/user/info/list',
            method:"post",
            params,
            data
        })
    }
}

单个拦截器的设置基本就这样，可以先去试试！

下面是扩展内容：

多个拦截器

其实处理起来也很简单，就是将上面的代码做成一个方法，不断创建service实例就可以，request.js可以改成这样：
request.js

import axios from 'axios'
import {  Message } from 'element-ui'
import Cookies from 'js-cookie'

function createService(options){
    //创建axios实例
    const service = axios.create（options）
    //请求拦截器
    service.interceptors.request.use(
        config=>{
            config.headers['Authorization'] = 'Bearer ' + Cookies.get( 'access_token')
            return config
        }, error=>{
            return Promise.reject(error)
        }
    ）
    //响应拦截器
    service.interceptors.response.use(
        response=>{
            const res = response.data
            if (!res.success) {
                Message.error(res.msg || '请求错误！')
                return Promise.reject(new Error(res.msg || '请求错误！'))
            }
            return res.result
        },
        error=>{
            Message.error( error.response.msg || error.response.status)
            //这里还可以根据status值（401、500等）分别做对应的处理，比如记录当前请求url，登录以后自动跳转到原url
            return Promise.reject(error)
        }
    )
    return service
}
//普通接口
let request1 = createService({
    baseURL:  'base-api',
    timeout: 15000
})
//文件上传接口(不能超时)
let request2 = createService({
    baseURL:  'file-api',
    responseType: 'blob',
    timeout: 0
})
//将实例暴露出去使用
export {request1, request2}

在api文件中就可以这样使用：

api.js

import { request1, request2 } from '@/utils/request'

export default {
    getUserList(params, data) {
        return request1({
            url: '/user/info/list',
            method:"post",
            params,
            data
        })
    },
    getFile(params, data) {
        return request2({
            url: '/file/info',
            method:"post",
            params,
            data
        })
    }
}

拦截器到这里就讲完了，具体的细节就靠你了。