Vue如何調(diào)用接口請求頭增加參數(shù)
更新時間:2023年01月19日 11:05:39 作者:HqL丶1024
這篇文章主要介紹了Vue如何調(diào)用接口請求頭增加參數(shù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
Vue調(diào)用接口請求頭增加參數(shù)
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://' //開發(fā)版本域名 api_secret = '935bda53552e49cd56' //開發(fā)版本秘鑰 } else { axios.defaults.baseURL = 'https://' //開發(fā)版本域名 api_secret = '935bda53552e49cd56fc' //開發(fā)版本秘鑰 } 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') { //請求頭這里加參數(shù)這里加參數(shù)這里加參數(shù)這里加參數(shù)這里加參數(shù) let setSecret = getSecret() config.headers['nonce'] = setSecret.nonce config.headers['timestamp'] = setSecret.timestamp config.headers['signature'] = setSecret.secret } // 發(fā)起請求時,取消掉當前正在進行的相同請求 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狀態(tài)碼正常,則直接返回數(shù)據(jù) if ( response && (response.status === 200 || response.status === 304 || response.status === 400) ) { return response // 如果不需要除了data之外的數(shù)據(jù),可以直接 return response.data } // 異常狀態(tài)下,把錯誤信息返回去 return { status: -404, msg: '網(wǎng)絡異常' } } function checkCode(res) { // 如果code異常(這里已經(jīng)包括網(wǎng)絡錯誤,服務器錯誤,后端拋出的錯誤),可以彈出一個錯誤提示,告訴用戶 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) //對四字節(jié)UTF-16轉(zhuǎn)換為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) }) } }
Vue取消接口請求
項目實際開發(fā)中,會遇到需要主動取消后端接口請求的需求
常見的情況是:接口返回時間過長,用戶在未返回之前就進入或返回了其他頁面,此時需要取消進行中的請求,使邏輯更完整更加優(yōu)雅。
直接復制關鍵代碼,直接使用!
接口js文件
注: 我是把所有請求封裝在了單獨的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' // 調(diào)用 userLoginCA 方法時除了需要的參數(shù),記得傳this進去 ?? ?userLoginCA({ ? ? ? ? ? loginPath: this.loginCode.loginPath.CA, ? ? ? ? ? accountType: this.loginCode.accountType.NATURE ? ? ? ? },this) ? ? ? ? .then((res) => {}) ? ? ? ? .catch((res) => {}) ? ? }
在需要調(diào)用取消的地方 執(zhí)行 this.cancel('請求已取消')
// 如頁面銷毀的生命周期 ? ? destroyed() { ? ? ?? ?console.log('退出頁面') ? ??? ??? ?this.cancel('請求已取消') // 關鍵代碼 ? ? },
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
完美解決vue中報錯?“TypeError:?Cannot?read?properties?of?null?
這篇文章主要介紹了完美解決vue中報錯?“TypeError:?Cannot?read?properties?of?null?(reading?‘forEach‘)“,本文給大家分享詳細解決方案,需要的朋友可以參考下2023-02-02