axios 封裝帶請求頻繁取消上一次請求 + 全局loading

resful配置自己配置吧我懶的寫

axios 封裝 首先引入axios 創建實例

import axios from 'axios'

// 創建axios實例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 6000 // 請求超時時間
})

然後加入axios的攔截器

service.interceptors.request.use(
  config => {
    return config
  },
  (error, response) => {
    console.log(error)
    console.log(response)
  }
)

service.interceptors.response.use(
  response => {
    return response.data
  }, error => {
    console.log(error)
    return Promise.reject(error)
  }
)
export default service

這個就簡單的處理了封裝 然後我們繼續封裝  判斷用戶的token根據用戶token給請求頭

即在攔截器請求判斷你的用戶是不是登錄了（這裏用到了js-cookie）

import Cookies from 'js-cookie'
if (Cookies.get('Admin-Token')) {
      config.headers['Authorization'] = Cookies.get('Admin-Token')
    }

這裏正常的封裝就完事了

然後我們加入 當多次請求的時候去除上一次請求

let pending = []
let CancelToken = axios.CancelToken

let cancelPending = (config) => {
  pending.forEach((item, index) => {
    if (config) {
      if (item.UrlPath === config.url) {
        item.Cancel() // 取消請求
        pending.splice(index, 1) // 移除當前請求記錄
      };
    } else {
      item.Cancel() // 取消請求
      pending.splice(index, 1) // 移除當前請求記錄
    }
  })
}

我們用一個數組包含所有請求 在每次請求的時候判斷是不是剛剛請求了 如果請求了就取消這個請求

表現出來的就是這樣了

全局loading:

先引入element的loading 

import { Loading } from 'element-ui'

let loading

添加函數設置loading展示隱藏

let startLoading = () => { // 使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '加載中……'
    // background: 'rgba(0, 0, 0, 0.7)'
  })
}
let endLoading = () => { // 使用Element loading-close 方法
  loading.close()
}

然後在攔截器中添加函數

具體代碼在這裏：

import axios from 'axios'
import Cookies from 'js-cookie'
import { Loading } from 'element-ui'
let loading
let pending = []
let CancelToken = axios.CancelToken

let cancelPending = (config) => {
  pending.forEach((item, index) => {
    if (config) {
      if (item.UrlPath === config.url) {
        item.Cancel() // 取消請求
        pending.splice(index, 1) // 移除當前請求記錄
      };
    } else {
      item.Cancel() // 取消請求
      pending.splice(index, 1) // 移除當前請求記錄
    }
  })
}

let startLoading = () => { // 使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '加載中……'
    // background: 'rgba(0, 0, 0, 0.7)'
  })
}
let endLoading = () => { // 使用Element loading-close 方法
  loading.close()
}
// 創建axios實例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 600000 // 請求超時時間
})

service.interceptors.request.use(
  config => {
    if (Cookies.get('Admin-Token')) {
      config.headers['Authorization'] = Cookies.get('Admin-Token')
    }
    cancelPending(config)
    config.cancelToken = new CancelToken(res => {
      pending.push({'UrlPath': config.url, 'Cancel': res})
    })
    startLoading()
    return config
  },
  (error, response) => {
    console.log(error)
    console.log(response)
  }
)

service.interceptors.response.use(
  response => {
    endLoading()
    cancelPending(response.config)
    return response.data
  }, error => {
    console.log(error)
    return Promise.reject(error)
  }
)
export default service