nprogress进度条插件的使用

发送请求时，浏览器展示进度条

安装插件

cnpm install --save nprogress@0.2

在封装axios的地方使用

//对于axios进行二次封测
import axios from 'axios';
import nProgress from 'nprogress';
//引入进度条样式
import 'nProgress/nprogress.css';
//start()代表进度条开始 done()代表进度条结束

//1.利用axios读写的方法create，创建一个axios实例
const request = axios.create({
    //设置基础路径，发送请求时路径自动拼接上api,如http://xxx:8080/api/xxx
    baseURL: "/api",
    timeout: '5000'
});
//请求拦截器:在发请求前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
request.interceptors.request.use((config)=>{
    //config：配置对象，对象里面有个属性，header请求头
    //进度条开始
    nProgress.start()
    return config;
});
//响应拦截器
request.interceptors.response.use((res)=>{
    //服务器成功的回调函数，服务器响应数据回来以后，响应拦截器可以检测到
     //进度条结束
     nProgress.done()
    return res.data
},(error)=>{
    //服务器响应失败的回调函数
    return Promise.reject(new Error('fail'));//终止promise链
})

//对外暴露
export default request;