axios的二次封装

Axios的二次封装、请求拦截器、可以在发请求之前处理一些业务

响应拦截器、服务器数据返回之后、可以处理一些业务

在项目中一般放置在api文件夹中 （axios）

下载并引入axios文件

const requests = axios.create({
    // 配置对象 
    //基本路径 发送请求时 路径会出现api
    baseURL: "/api",
    //代表请求时间为5s
    timeout: 5000,
})
//请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
requests.interceptors.request.use((config) => {
    // 进度条开始
    nprogress.start()
    //现在的问题是config是什么?配置对象 会包含headers请求头
    return config;
});
//响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
requests.interceptors.response.use(
    (res) => {
        //进度条结束
        nprogress.done();
        //相应成功做的事情
        return res.data;
    },
    (error) => {
        // alert("服务器响应数据失败");
        return Promise.reject(new Error('faile'))
    }
);

配置进度条结束以及开始

安装进度条插件

在请求响应以及拦截响应上面进行使用

在请求开始时设置为进度条开始

拦截时为结束进度条

Start代表进度条开始

Done代表进度条结束