axios的二次封装和请求响应挟持

一、axios二次封装分别为request和response主要构成。

//axios.js
import axios from 'axios'
import config from '@/config'

const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
class HttpRequest{
    constructor(baseUrl){
        this.baseUrl = baseUrl
        this.queue = {}
    }
    getInsideConfig(){
        const config = {
            baseURL:this.baseUrl,
            header:{
                //
            }
        }
        return config
    }
    interceptors(instance,url){
        instance.interceptors.request.use((config)=>{
            //处理config
            console.log('拦截和处理请求')
            config.data = {
                msg:"helloworld"
            }
            console.log(config)
            return config
        })
        instance.interceptors.response.use((res)=>{
            //处理响应
            console.log("处理响应")
            return res.data
        },(error)=>{
            //请求出问题，处理问题
            console.log(error)
            return {error:"网络出错了"}
        })
    }
    request(options){
        const instance = axios.create()//创造实例对象
        options = Object.assign(this.getInsideConfig(),options)
        this.interceptors(instance,options.url)
        return instance(options)
    }
}


const axiosObj = new HttpRequest(baseUrl)
export default axiosObj

2.请求响应劫持的使用

//data.js
import axios from '@/api/axios'
export const getBannerData = ()=>{
    return axios.request({
        url:"banner",
        method:'get'
    })
}

3.在vue上调用getBannerData的数据

import {getBannerData} from "./api/data.js"
async mounted(){
let result=await getBannerData()
}