Vue如何调用接口请求头增加参数
导读：收集整理的这篇文章主要介绍了Vue如何调用接口请求头增加参数，觉得挺不错的，现在分享给大家，也给大家做个参考。 目录Vue调用接口请求头增加参数Vue取消接口请求接口js文件页面中引用总...
收集整理的这篇文章主要介绍了Vue如何调用接口请求头增加参数，觉得挺不错的，现在分享给大家，也给大家做个参考。 目录
- 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 = 10000let cancelconst promiseArr = {
}
const CancelToken = axios.CancelTokenaxios.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;
}
// UTF8function 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('请求已取消') // 关键代码 }
,总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的文章:- Vue中Axios中取消请求及阻止重复请求的方法
- vue切换菜单取消未完成接口请求的案例
- Vue路由切换和Axios接口取消重复请求详解
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Vue如何调用接口请求头增加参数
本文地址： https://pptw.com/jishu/609369.html