就是瀏覽器在載入過程的進度條

安裝

npm install --save nprogress

start：表示進度條開始

done：表示進度條結束

import axios from "axios"
//引入進度條
import nprogress from "nprogress"
const requests =axios.create({
    baseURL:"/api",
    timeout:5000,
})

requests.interceptors.request.use((config)=>{
    nprogress.start()  //進度條開始
    return config;
})

requests.interceptors.response.use((res)=>{

    nprogress.done()  //進度條結束
    return res.data;
},(error)=>{

    return Promise.reject(new Error("fail"))
})

export default requests

但是此時沒有進度條的效果，

因為此時沒有引入進度條的樣式

import "nprogress/nprogress.css"

　　引入之後此時就有了進度條的樣式

我們也可以更改進度條的樣式

開啟進度條的樣式檔案

開啟nprogress.css檔案，修改下面的background屬性的內容就可以了

此時我們改為紅色

  background: red;

此時就變成了紅色