axios的二次封装

axios二次封装

…\src\api\ajax.js

额外的让axios发请求时，具有其他功能：

1. 配置基础路径和超时限制
2. 添加进度条信息 nprogress
3. 返回的响应不再需要从data属性当中拿数据，而是响应就是我们要拿的数据
4. 统一处理请求数据，具体请求也可以选择处理或不处理

以后只要是对axios二次封装，不会在axios身上直接去封装，而是创建一个新的axios实例进行封装
axios.create()创建一个新的和axios具有相同功能的一个实例

//创建一个新的实例
const service = axios.create({
//配置基础路径和超时限制
    baseURL:'/api',//当前项目当中所有接口路径的公关路径部分，基础路径
    timeout:10000,//当ajax请求超过设置的这个时间则超时
});

添加额外的功能或是给请求头添加额外的信息，必定要用到请求拦截器和响应拦截器
返回一个成功回调和失败回调，在请求拦截器中失败回调可以不写
一般形式

//请求拦截器
service.interceptors.request.use(function (config) {
    return config;
}, function (error) {
    return Promise.reject(error)
});
// 响应拦截器
service.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    return Promise.reject(error)
});

安装进度条的包 nprogress
npm i --save nprogress

在ajax.js导入文件

import NProgress from 'nprogress';
import 'nprogress/nprogress.css'

添加进度条功能

//请求拦截器 每个ajax请求都要经过这个拦截器去拦截
service.interceptors.request.use(
    // 请求拦截器当中成功的回调

    (config) => {
        // config其实就是我们的请求报文
        // 这个请求报文，最后一定要返回去，因为还要继续往下走
        //在这里我们可以添加额外的功能，也可以给请求头添加需要的数据
        NProgress.start();//开启进度条

        return config;
    });
// 响应拦截器
//返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
//统一处理请求错误, 具体请求也可以选择处理或不处理

service.interceptors.response.use(
    (response) => {
        //response其实就是我们的响应报文
        //我们也是可以添加额外功能或者对响应报文进行处理

        NProgress.done();//停止进度条
        return response.data;//返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
    },
    (error) => {
        NProgress.done();//停止进度条
        //可以统一处理错误
        alert('发送ajax请求失败' + error.message || '未知错误')
        //统一处理完成之后，这个错误可以让后面继续处理
        // return Promise.reject(new Error('发送ajax请求失败')) //后面想继续处理这个错误，返回失败的promise,后面还能使用.catch处理

        //也可以不让后面继续处理这个错误，中断promise链
        return new Promise(() => { })  //返回的是pending状态的promise，代表中断promise链，后期也就没办法处理了


    });