【Vue】axios的进一步封装/nprogress的使用

导入axios与nprogress，和nprogress.css样式

import axios from 'axios'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import Qs from 'qs'

对axios的进一步封装

// 1、对axios二次封装
const requests = axios.create({
  // 基础路径，requests发出的请求在端口号后面会跟改baseURl
  baseURL: 'http://127.0.0.1:80/api',
  timeout: 5000,
  //解决后端使用req.body无法拿到数据
  headers: {
    deviceCode: 'A95ZEF1-47B5-AC90BF3'
  },
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    return Qs.stringify(data)
  }]
})
// 2、配置请求拦截器
requests.interceptors.request.use((config) => {
 // config内主要是对请求头Header配置
  // 比如添加token
  if (config.url.indexOf('user') === 1) {
    config.headers.common.Authorization = localStorage.getItem('token')
  }
  nprogress.start()
  return config
})
// 3、配置相应拦截器
requests.interceptors.response.use(
  (res) => {
    // 成功的回调函数
    nprogress.done()
    return res.data
  },
  (error) => {
    // 失败的回调函数
    console.log('响应失败' + error)
    return Promise.reject(new Error('fail'))
  }
)
// 4、对外暴露
export default requests