Vue调用接口请求头增加参数
Vue取消接口请求
接口js文件
页面中引用
总结
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('请求已取消') // 关键代码
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。