Add parameters to Vue call interface request header
import axios from 'axios' import qs from 'qs' let api_secret = '935bda53552e49cd56fc' // Basic configurationif (.NODE_ENV === 'production') { // = 'https://' //Online version domain name // api_secret = '84a58d7e0c1c89c4c57b41f4f396a45c' //Online version key = 'https://' //Development version domain name api_secret = '935bda53552e49cd56' //Development version key} else { = 'https://' //Development version domain name api_secret = '935bda53552e49cd56fc' //Development version key} = { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } = 10000 let cancel const promiseArr = {} const CancelToken = ( config => { if (.NODE_ENV === 'production') { //Add parameters here, add parameters here, add parameters here, add parameters here, add parameters here, add parameters here, add parameters here, add parameters here, add parameters here, add parameters let setSecret = getSecret() ['nonce'] = ['timestamp'] = ['signature'] = } // When making a request, cancel the same request currently in progress if (promiseArr[]) { // promiseArr[]('Operation Cancel') promiseArr[] = cancel } else { promiseArr[] = cancel } return config }, error => { return (error) } ) ( response => { return response }, error => { return () } ) function checkStatus(response) { // loading // If the http status code is normal, return the data directly if ( response && ( === 200 || === 304 || === 400) ) { return response // If you do not need data other than data, you can directly return } // In exception state, return the error message return { status: -404, msg: 'Network exception' } } function checkCode(res) { // If the code is exception (which already includes network errors, server errors, and errors thrown by the backend), an error message can be popped up to tell the user that it will if ( === -404) { () } return res } // Shared method to get signaturefunction getSecret() { let nonce = getNonce() let timestamp = getTimestamp() let secret = sha1(api_secret + nonce + timestamp) let obj = { nonce: nonce, timestamp: timestamp, secret: secret, } return obj } // Random stringfunction getNonce() { let alphabet = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM' let strlenght = 8 /// The generated string is fixed in length let $num = '' for (var i = 0; i < strlenght; i++) { $num = $num + alphabet[(() * )] } return $num } // Time stampfunction getTimestamp() { let timestamp = (new Date()) / 1000 return timestamp } // Encrypt the string into hex stringfunction sha1(s) { var data = new Uint8Array(encodeUTF8(s)) var i, j, t; var l = (( + 8) >>> 6 << 4) + 16, s = new Uint8Array(l << 2); (new Uint8Array()), s = new Uint32Array(); for (t = new DataView(), i = 0; i < l; i++) s[i] = t.getUint32(i << 2); s[ >> 2] |= 0x80 << (24 - ( & 3) * 8); s[l - 1] = << 3; var w = [], f = [ function () { return m[1] & m[2] | ~m[1] & m[3]; }, function () { return m[1] ^ m[2] ^ m[3]; }, function () { return m[1] & m[2] | m[1] & m[3] | m[2] & m[3]; }, function () { return m[1] ^ m[2] ^ m[3]; } ], rol = function (n, c) { return n << c | n >>> (32 - c); }, k = [1518500249, 1859775393, -1894007588, -899497514], m = [1732584193, -271733879, null, null, -1009589776]; m[2] = ~m[0], m[3] = ~m[1]; for (i = 0; i < ; i += 16) { var o = (0); for (j = 0; j < 80; j++) w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1), t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0, m[1] = rol(m[1], 30), (), (t); for (j = 0; j < 5; j++) m[j] = m[j] + o[j] | 0; }; t = new DataView(new Uint32Array(m).buffer); for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2); var hex = (new Uint8Array(new Uint32Array(m).buffer), function (e) { return (e < 16 ? "0" : "") + (16); }).join(""); return hex; } // UTF8 function encodeUTF8(s) { var i, r = [], c, x; for (i = 0; i < ; i++) if ((c = (i)) < 0x80) (c); else if (c < 0x800) (0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F)); else { if ((x = c ^ 0xD800) >> 10 == 0) //Convert four-byte UTF-16 to Unicode c = (x << 10) + ((++i) ^ 0xDC00) + 0x10000, (0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F)); else (0xE0 + (c >> 12 & 0xF)); (0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F)); }; return r; } export default { post(url, data) { return axios({ method: 'post', url, data: (data), cancelToken: new CancelToken(c => { cancel = c }) }) .then(response => { return checkStatus(response) }) .then(res => { return checkCode(res) }) }, postFormdata(url, data) { return axios({ method: 'post', url, data, headers: { 'Content-Type': 'multipart/form-data' } }) .then(response => { return checkStatus(response) }) .then(res => { return checkCode(res) }) }, get(url, query) { return axios({ method: 'get', url, params: query, cancelToken: new CancelToken(c => { cancel = c }) }).then(response => { return checkStatus(response) }).then(res => { return checkCode(res) }) } }
Vue cancels interface request
During the actual development of the project, you will encounter the need to actively cancel the backend interface request.
Common situations are:The interface returns for too long, and the user enters or returns to other pages before returning. At this time, the in-progress request needs to be cancelled to make the logic more complete and elegant.
Copy the key code directly and use it directly!
Interface js file
Note: I encapsulate all requests in a separate js file, just pay attention to the key code
// Encapsulated interface file import axios from 'axios' // Key codeconst CancelToken = // Key code //Add one more method to pass thatexport function userLoginCA(data, that) { return request({ url: 'user/login', method: 'post', data, // Key code cancelToken cancelToken: new CancelToken(function executor(c) { = c }) }) }
Quotes on the page
import { userLoginCA } from '@/api/user' // In addition to the required parameters when calling the userLoginCA method, remember to pass this in userLoginCA({ loginPath: , accountType: },this) .then((res) => {}) .catch((res) => {}) }
Execute where the call is cancelled ('Request cancelled')
// Like the life cycle of page destruction destroyed() { ('Exit Page') ('Request cancelled') // Key code },
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.