封装自己的axios

一般会在src下面建立一个libs文件夹 然后在libs建一个ajaxRequest.js 下面的代码都在这个文件中

先引入原装的axios

先安装npm i axios

import axios from 'axios'

创建一个类

class ajaxRequest{
    constructor(){
        this.baseURL = process.env.NODE_ENV ? '/' : 'http://localhost:3000'
        this.timeOut = 3000 
    }
    //这个方法就是想把传入的options和上面的construcor里面的值存放到一起
    merge(options){
        return {[...options],baseURL:this.baseURL,timeOut:this.timeOut}
    }
    request(options){
    //调用request时需要传入options
        let instance = axios.create()
        let configs = this.merge(options)
        return instance(configs)
    }
}

export default new ajaxRequest

baseURL后面的那个路径是访问后端的接口的基础路径

请求拦截和响应拦截

setInterceptor(instance){
    instance.interceptors.request.use((config)=>{
        return config
    })
    instance.interceptors.response.use((res)=>
    //res是成功调用接口时返回的数据 响应拦截后就直接输出数据.data的数据
        return res.data
    )}
    
}

然后把setInterceptor这个函数放到request中

 request(options){
    //调用request时需要传入options
        let instance = axios.create()
        this.setInterceptor(instance)
        let configs = this.merge(options)
        return instance(configs)
    }

访问有些网页时 需要带一个头authorization 可以在请求拦截时加上这个头

在libs下面建一个local.js 这个就是把信息放到localStorage

export const setLocal = (key,value)=>{
    return localStorage.setItem(key,value)
}

export const getLocal = (key)=>{
    return localStorage.getItem(key)
}

在响应拦截时加上这个头

引入 只用export导出时 引入需要使用下面的形式 用export default 导出时 引入只需要把下面的{}去掉

import {getLocal} from './local.js'

instance.interceptors.request.use((config)=>{
        config.headers.Authorization(getLocal('token'))
        return config
    })