vue防止接口重復請求實現方法

// 封裝axios的請求，返回重新封裝的數據格式 // 對錯誤的統一處理 import axios from 'axios' import errorHandle from './errorHandle' const CancelToken = axios.CancelToken class HttpRequest { constructor (baseUrl) { this.baseUrl = baseUrl this.pending = {} // 對象的key為每個正在請求的接口，value為取消該接口的方法 } // 獲取axios配置 getInsideConfig () { const config = { baseURL: this.baseUrl, headers: { 'Content-Type': 'application/json;charset=utf-8' }, timeout: 10000 } return config } removePending (key, isRequest = false) { // 同一接口重復請求 if (this.pending[key] && isRequest) { this.pending[key]('取消重復請求') } // 如果不是同一接口重復請求，則刪除pending對象里該請求對應的key delete this.pending[key] } // 設定攔截器 interceptors (instance) { // 請求攔截器 instance.interceptors.request.use((config) => { // Do something before request is sent let key = config.url + '&' + config.method this.removePending(key, true) config.cancelToken = new CancelToken((c) => { this.pending[key] = c }) return config }, (err) => { // debugger errorHandle(err) // Do something with request error return Promise.reject(err) }) // 響應請求的攔截器 instance.interceptors.response.use((res) => { // Any status code that lie within the range of 2xx cause this function to trigger // Do something with response data let key = res.config.url + '&' + res.config.method // 響應結束后刪除pending對象里該請求對應的key this.removePending(key) if (res.status === 200) { return Promise.resolve(res.data) } else { return Promise.reject(res) } }, (err) => { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error // debugger errorHandle(err) return Promise.reject(err) }) } // 創建實例 request (options) { const instance = axios.create() const newOptions = Object.assign(this.getInsideConfig(), options) this.interceptors(instance) return instance(newOptions) } get (url, config) { const options = Object.assign({ method: 'get', url: url }, config) return this.request(options) } post (url, data) { return this.request({ method: 'post', url: url, data: data }) } } export default HttpRequest