vue请求拦截响应拦截

2020.10.28 早9.40。

今天忙里偷闲记录下在vue里面封装axios以及请求拦截响应拦截器

首先理解整个思路：

1、将baseUrl提出来，这是访问服务端的地址。

2、使用es6类的写法封装axios拦截器。

3、封装之后在创建api文件夹在此文件夹里面引入封装后的axios，之后就可以创建各个接口。

BaseUrl.js

export const baseUrl = process.env.NODE_ENV === 'production' 
    ? './'  //生产环境下的url 
    : ''    //开发环境下的url 如果vue.config.js里面配置了代理，那么这里不需要写直接为空字符串

axios.js

import { baseUrl } from './BaseUrl.js'

class HttpRequest {
    constructor ( baseurl = baseUrl ) {
        this.baseurl = baseurl
        this.queue = {}
    }
    
    getInsideConfig() {
        const config = {
            baseurl : this.baseurl,
            headers: {
               'Content-Type': 'application/json;chartset=utf-8'
            }
        }
        return config
    }
    
    interceptors(instance) {
        instance.interceptors.request.use(config => {  //请求拦截
            config.headers['token'] = getToken()
            return config
        }, error => {
            return Promise.reject(error)
        })

        instance.interceptors.response.use(res => { //响应拦截
            return res
        }, error => {
            return Promise.reject(error)
        })
    }

    request(options){
        const instance = axios.create()
        options = Object.assign(this.getInsideConfig(), options)
        this.interceptors(instance)
        return instance(options)
    }
}

export default HttpRequest

创建api文件夹 随后接口都在此文件夹下调用

index.js

import HttpRequest from './lib/axios.js'

const axios = new HttpRequest()

export default axios

api文件夹下创建一个login.js

import axios from './index.js'

export const getLogin = ( userName, password) => {
    return axios.request({
        url: '/admin/login',
        data: {
            userName,
            password
        }
    })
}