<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
import axios from 'axios' import qs from 'qs' let api_secret = '935bda53552e49cd56fc' // 基礎設定 if (process.env.NODE_ENV === 'production') { // axios.defaults.baseURL = 'https://' //線上版本域名 // api_secret = '84a58d7e0c1c89c4c57b41f4f396a45c' //線上版本祕鑰 axios.defaults.baseURL = 'https://' //開發版本域名 api_secret = '935bda53552e49cd56' //開發版本祕鑰 } else { axios.defaults.baseURL = 'https://' //開發版本域名 api_secret = '935bda53552e49cd56fc' //開發版本祕鑰 } axios.defaults.headers.post = { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } axios.defaults.timeout = 10000 let cancel const promiseArr = {} const CancelToken = axios.CancelToken axios.interceptors.request.use( config => { if (process.env.NODE_ENV === 'production') { //請求頭這裡加引數這裡加引數這裡加引數這裡加引數這裡加引數 let setSecret = getSecret() config.headers['nonce'] = setSecret.nonce config.headers['timestamp'] = setSecret.timestamp config.headers['signature'] = setSecret.secret } // 發起請求時,取消掉當前正在進行的相同請求 if (promiseArr[config.url]) { // promiseArr[config.url]('操作取消') promiseArr[config.url] = cancel } else { promiseArr[config.url] = cancel } return config }, error => { return Promise.reject(error) } ) axios.interceptors.response.use( response => { return response }, error => { return Promise.resolve(error.response) } ) function checkStatus(response) { // loading // 如果http狀態碼正常,則直接返回資料 if ( response && (response.status === 200 || response.status === 304 || response.status === 400) ) { return response // 如果不需要除了data之外的資料,可以直接 return response.data } // 異常狀態下,把錯誤資訊返回去 return { status: -404, msg: '網路異常' } } function checkCode(res) { // 如果code異常(這裡已經包括網路錯誤,伺服器錯誤,後端丟擲的錯誤),可以彈出一個錯誤提示,告訴使用者 if (res.status === -404) { console.warn(res.msg) } return res } // 共用方法獲取簽名 function getSecret() { let nonce = getNonce() let timestamp = getTimestamp() let secret = sha1(api_secret + nonce + timestamp) let obj = { nonce: nonce, timestamp: timestamp, secret: secret, } return obj } // 隨機字串 function getNonce() { let alphabet = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM' let strlenght = 8 /// 生成的字串固定長度 let $num = '' for (var i = 0; i < strlenght; i++) { $num = $num + alphabet[Math.floor(Math.random() * alphabet.length)] } return $num } // 時間戳 function getTimestamp() { let timestamp = Date.parse(new Date()) / 1000 return timestamp } // 字串加密成 hex 字串 function sha1(s) { var data = new Uint8Array(encodeUTF8(s)) var i, j, t; var l = ((data.length + 8) >>> 6 << 4) + 16, s = new Uint8Array(l << 2); s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer); for (t = new DataView(s.buffer), i = 0; i < l; i++) s[i] = t.getUint32(i << 2); s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8); s[l - 1] = data.length << 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 < s.length; i += 16) { var o = m.slice(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), m.pop(), m.unshift(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 = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) { return (e < 16 ? "0" : "") + e.toString(16); }).join(""); return hex; } // UTF8 function encodeUTF8(s) { var i, r = [], c, x; for (i = 0; i < s.length; i++) if ((c = s.charCodeAt(i)) < 0x80) r.push(c); else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F)); else { if ((x = c ^ 0xD800) >> 10 == 0) //對四位元組UTF-16轉換為Unicode c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000, r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F)); else r.push(0xE0 + (c >> 12 & 0xF)); r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F)); }; return r; } export default { post(url, data) { return axios({ method: 'post', url, data: qs.stringify(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) }) } }
專案實際開發中,會遇到需要主動取消後端介面請求的需求
常見的情況是:介面返回時間過長,使用者在未返回之前就進入或返回了其他頁面,此時需要取消進行中的請求,使邏輯更完整更加優雅。
直接複製關鍵程式碼,直接使用!
注: 我是把所有請求封裝在了單獨的js檔案中,注意關鍵程式碼即可
// 封裝好的介面檔案 import axios from 'axios' // 關鍵程式碼 const CancelToken = axios.CancelToken // 關鍵程式碼 //方法傳參多加一個 that傳進去 export function userLoginCA(data, that) { return request({ url: 'user/login', method: 'post', data, // 關鍵程式碼 cancelToken cancelToken: new CancelToken(function executor(c) { that.cancel = c }) }) }
import { userLoginCA } from '@/api/user' // 呼叫 userLoginCA 方法時除了需要的引數,記得傳this進去 userLoginCA({ loginPath: this.loginCode.loginPath.CA, accountType: this.loginCode.accountType.NATURE },this) .then((res) => {}) .catch((res) => {}) }
在需要呼叫取消的地方 執行 this.cancel('請求已取消')
// 如頁面銷燬的生命週期 destroyed() { console.log('退出頁面') this.cancel('請求已取消') // 關鍵程式碼 },
以上為個人經驗,希望能給大家一個參考,也希望大家多多支援it145.com。
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45