Vue如何调用接口请求头增加参数

更新时间：2023年01月19日 11:05:39 作者：HqL丶1024

这篇文章主要介绍了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('请求已取消') // 关键代码
    },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue Object 的变化侦测实现代码
这篇文章主要介绍了Vue Object的变化侦测实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue祖孙组件如何实现传值
这篇文章主要介绍了Vue祖孙组件如何实现传值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue项目webpack打包部署到服务器的实例详解
这篇文章主要介绍了Vue项目webpack打包部署到服务器的实例详解的相关资料,需要的朋友可以参考下
2017-07-07
vue弹窗组件的使用(传值),以及弹窗只能触发一次的问题
这篇文章主要介绍了vue弹窗组件的使用(传值),以及弹窗只能触发一次的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
浅谈vue 二级路由嵌套和二级路由高亮问题
这篇文章主要介绍了浅谈vue 二级路由嵌套和二级路由高亮问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue watch响应数据实现方法解析
这篇文章主要介绍了Vue watch响应数据实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
使用provide/inject实现跨组件通信的方法
在 Vue 应用中,组件间通信是构建复杂应用时的一个常见需求,Vue3.x 提供了provide和inject API,让跨组件通信变得更加简洁和高效,本文将深入探讨如何使用provide和inject在Vue3.x中实现跨组件通信,并通过示例代码一步步进行说明,需要的朋友可以参考下
2024-03-03
全面详解vue种数组去重的12种方法示例
这篇文章主要介绍了vue数组去重的12种方法示例全面详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
Vue.js每天必学之方法与事件处理器
Vue.js每天必学之方法与事件处理器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
vue v-for循环重复数据无法添加问题解决方法【加track-by=''索引''】
这篇文章主要介绍了vue v-for循环重复数据无法添加问题解决方法,结合实例形式分析了vue.js通过在v-for循环中添加track-by='索引'解决重复数据无法添加问题相关操作技巧,需要的朋友可以参考下
2019-03-03