首页 > Vue >

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

时间: 作者:admin 浏览:

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
        })
    }
}

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

前端新手交流群
欢迎加入web前端新手交流qq群:
734802480(已满)、 794324979

更多文章

栏目文章


Copyright © 2014-2022 seozhijia.net 版权所有-粤ICP备13087626号-4