Vue如何調用接口請求頭增加參數
Vue調用接口請求頭增加參數
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)
})
}
}
Vue取消接口請求
項目實際開發中，會遇到需要主動取消後端接口請求的需求
常見的情況是：接口返回時間過長，用戶在未返回之前就進入或返回瞭其他頁面，此時需要取消進行中的請求，使邏輯更完整更加優雅。
直接復制關鍵代碼，直接使用！
接口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'
// 調用 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('請求已取消') // 關鍵代碼
},
總結
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。