Vue的axios封装

1、在 src 下新建 request目录 ，在request目录下新建 request.js

request.js 中：

import axios from "axios"

//创建一个单例（实例）
const instance = axios.create({
    baseURL:"url",
    timeout:5000
})

//请求拦截
//instance.interceptors.request.use(callback,callback)
instance.interceptors.request.use(config=>{
    console.log("每一次发起请求前，都会先执行这里的代码");
    console.log(config); //config本次请求的配置信息
    return config
},err=>{
    return Promise.reject(err)
})

//响应拦截
//instance.interceptors.response.use(callback,callback)
instance.interceptors.response.use(res=>{
    console.log("每一次接收到响应，都会先执行这里的代码，再去执行成功的那个回调函数then");
    return res
},err=>{
    return Promise.reject(err)
})

//按需导出
export default instance

2、为了更好地管理我们的这些接口，我们把所有请求都抽取出来在一个api.js中，在request目录下新建api.js

api.js 中：

//可以统一管理所有的api接口
import request from './request'

// 请求首页的数据
export const GetHomeLists = () => request.get('/index/index')

发起请求

在Home.vue中：

import {GetHomeLists} from "@/request/api"

created(){
    GetHomeLists()
        .then(res=>{
            if(res.errno == 0){
                console.log(res.data)	// 成功拿到所有首页数据
            }
        })
}

标签：axios,封装,api,res,request,interceptors,js,instance,Vue
来源： https://blog.csdn.net/ScumStudy/article/details/121316276