/**
* Returns an object that contains a new `CancelToken` and a function that, when called,
* cancels the `CancelToken`.
*/
CancelToken.source = functionsource() {
var cancel;
var token = new CancelToken(function executor(c) {
cancel = c;
});
return {
token: token,
cancel: cancel
};
};
複製代碼
/**
* A `CancelToken` is an object that can be used to request cancellation of an operation.
*
* @class
* @param {Function} executor The executor function.
*/
function CancelToken(executor) {
if (typeof executor !== 'function') {
throw new TypeError('executor must be a function.');
}
var resolvePromise;
this.promise = new Promise(function promiseExecutor(resolve) {
resolvePromise = resolve;
});
var token = this;
executor(function cancel(message) {
if (token.reason) {
// Cancellation has already been requested
return;
}
token.reason = new Cancel(message);
resolvePromise(token.reason);
});
}
複製代碼
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// An executor function receives a cancel function as a parameter
cancel = c;
})
});
// cancel the request
cancel();
複製代碼
let pendingAjax = []
const FAST_CLICK_MSG = '數據請求中，請稍後'
const CancelToken = axios.CancelToken
const removePendingAjax = (url, type) => {
const index = pendingAjax.findIndex(i => i.url === url)
if (index > -1) {
type === 'req' && pendingAjax[index].c(FAST_CLICK_MSG)
pendingAjax.splice(index, 1)
}
}
// Add a request interceptor
axios.interceptors.request.use(
function (config) {
// Do something before request is sent
const url = config.url
removePendingAjax(url, 'req')
config.cancelToken = new CancelToken(c => {
pendingAjax.push({
url,
c
})
})
return config
},
function (error) {
// Do something with request error
return Promise.reject(error)
}
)
// Add a response interceptor
axios.interceptors.response.use(
function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
removePendingAjax(response.config.url, 'resp')
return new Promise((resolve, reject) => {
if (+response.data.code !== 0) {
reject(new Error('network error:' + response.data.msg))
} else {
resolve(response)
}
})
},
function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
Message.error(error)
return Promise.reject(error)
}
)
複製代碼
let pendingAjax = []
const FAST_CLICK_MSG = '數據請求中，請稍後'
const CancelToken = axios.CancelToken
const removePendingAjax = (config, c) => {
const url = config.url
const index = pendingAjax.findIndex(i => i === url)
if (index > -1) {
c ? c(FAST_CLICK_MSG) : pendingAjax.splice(index, 1)
} else {
c && pendingAjax.push(url)
}
}
// Add a request interceptor
axios.interceptors.request.use(
function (config) {
// Do something before request is sent
config.cancelToken = new CancelToken(c => {
removePendingAjax(config, c)
})
return config
},
function (error) {
// Do something with request error
return Promise.reject(error)
}
)
// Add a response interceptor
axios.interceptors.response.use(
function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
removePendingAjax(response.config)
return new Promise((resolve, reject) => {
if (+response.data.code !== 0) {
reject(new Error('network error:' + response.data.msg))
} else {
resolve(response)
}
})
},
function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
if (error.message !== FAST_CLICK_MSG) {
// 修復 由 網絡超時等緣由，致使 當前請求 url 未從 pendingReqs 刪除
pendingAjax.splice(0, pendingAjax.length)
Message.error('網絡開小差中')
return Promise.reject(error)
}
}
)
複製代碼
