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 = 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('请求已取消') // 关键代码
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue路由切换和Axios接口取消重复请求详解

    目录 前言 场景 解决方案 axios中如何取消请求 项目中封装使用 总结 参考 前言 在日常前端开发中, 经常会遇到频繁发起的重复请求, 会给服务器及网络造成不必要的压力, 可通过取消重复请求解决 场景 订单数据条件筛选查询 表单提交按钮频繁点击 路由页面切换请求未取消 解决方案 在每个请求发起的时候存储当前存储的标记在一个数组或Map中, 针对每个请求的时候在请求拦截中查询是否重复, 如果已重复则取消历史中重复的请求, 再发起当前请求, 如果没有重复, 则添加存储标记并正常请求, 已请求完成

  • vue切换菜单取消未完成接口请求的案例

    在做别的功能时 console里面总会报别的菜单接口里的错 看的很心烦 于是想优化一下 就有了这篇文章 在切换菜单的时候取消所有未完成接口的请求 1.找到自己的请求拦截器 重点是 config.cancelToken = global.store.source.token; http.interceptors.request.use(config => { config.cancelToken = global.store.source.token; return config }, err =

  • Vue中Axios中取消请求及阻止重复请求的方法

    目录 阻止请求目的: 常见情况: 新建 axios.js 文件 全局 main.js 引入 阻止请求目的: 为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求,从而导致前端向后端重复发送多次请求. 常见情况: PC端:输入框搜素,多次请求接口移动端:移动端很容易造成误操作或多操作请求(移动端没有点击延迟)注意:有Loading遮罩时也有可能发生重复请求 新建 axios.js 文件 import axios from "axios"; // import router fro

  • vue+axios全局添加请求头和参数操作

    走登录的接口都会返回一个token值,然后存起来方便之后调接口的时候给后台传过去,传给后台的方式有两种:(具体使用哪种需要和后台商量) 1.放在请求头中 2.放在接口的参数中 1.放在请求头中 下面代码是从本地cookie中拿token VueCookie:一个用于处理浏览器cookies的简单Vue.js插件. // 在封装axios的文件中添加拦截器 // 添加请求拦截器,在请求头中加token service.interceptors.request.use( config => { //

  • vue再次进入页面不会再次调用接口请求问题

    目录 再次进入页面不会再次调用接口请求 实际例子 vue请求接口常用写法(axios) 1. 项目根目录下新建一个utils文件夹 2.在项目根目录下新建一个api文件夹存放获取api的js文件 3.请求的数据类型 再次进入页面不会再次调用接口请求 在vue实际项目中,很多时候会在mounted或者created请求数据接口然后渲染到页面上,但是这两个生命周期都是只会在第一次进入页面后执行,再次进入该页面时,由于vue-router的机制,会缓存已经加载过的页面数据这样会大大提高效率,所以我们使

  • springboot+vue完成发送接口请求显示响应头信息

    目录 基于 springboot+vue 的测试平台 一.后端实现 二.前端实现 1. 返回的数据放到 vuex 中 2. 从 vuex 中获取数据并展示 基于 springboot+vue 的测试平台 (练手项目)开发继续更新. 在接口编辑页中点击发送接口请求,除了显示响应体外,还可以显示响应头等辅助信息,今天完成这个功能的开发. 一.后端实现 后端主要是修改一下处理接口发送请求的方法apiTestRun,之前这个方法返回的直接就是一个响应体,现在修改成返回更多的内容. 如图所示,注释掉的部分

  • OpenFeign调用服务请求头丢失Token的解决

    OpenFeign调用服务请求头丢失Token 导致原因: 解决方案: 代码实现 @Configuration @Slf4j public class FeignConfig { @Value("${jwt.header}") private String tokenHeader; @Bean("requestInterceptor") public RequestInterceptor requestInterceptor() { return new Reque

  • vue如何从接口请求数据

    这两天学习了vue如何从接口请求数据,所以,今天添加一点小笔记. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>获取图片列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,m

  • openFeign服务之间调用保持请求头信息处理方式

    openFeign服务间调用保持请求头信息处理 1.注意特殊情况,在定时任务或者内部之间调用,没有request的时候,不要处理直接返回. 2.在GET请求,参数确放在Body里面传递的情况,restTemplate是不认识的,所以这里要转化下处理,然后清空body数据 3.在请求过程中如果出现java.io.IOException: too many bytes written异常,请参考保持请求头造成请求头和content-length不一致 /** * 解决服务调用丢失请求头的问题 * @

  • C#使用Post调用接口并传递json参数

    目录 Post调用接口并传递json参数 Post请求参数(发送Json参数.发送普通参数) 1.发送Json格式的Post请求 2.带参数的Post请求 Post调用接口并传递json参数 public string Post(string Url, string jsonParas) { string strURL = Url; //创建一个HTTP请求 HttpWebRequest request = (HttpWebRequest)WebRequest.Create(strURL); /

  • 使用Vue实现调用接口加载页面初始数据

    闲着没事写了一个电影推荐的网页,很简单,使用的是Vue的实现. let vm = new Vue({ el:'#content', data:{ name:'', pic:'', actor:'', detail:'', link:'' }, mounted:function () { this.getMovie(); }, methods:{ getMovie:function () { var _this = this; let url = '/niuren/getRecommendFilm

  • Vue使用axios添加请求头方式

    目录 使用axios添加请求头 axios添加自定义头部出现的问题 使用axios添加请求头 import axios from 'axios' const service = axios.create({ baseURL: process.env.VUE_APP_API, // 请求的接口 timeout: 100000 // 请求超时时间 }) // 使用拦截器,定义全局请求头 service.interceptors.request.use(config => { // 在请求头中添加to

  • springboot vue测试平台接口定义及发送请求功能实现

    目录 基于 springboot+vue 的测试平台开发 一.http客户端选型 二.后端接口实现 1. controller 层 2. service 层 三.前端实现 四.修改遗留 bug 基于 springboot+vue 的测试平台开发 继续更新 添加的接口,我要来调试确定是否是通的,那么要发送接口请求,今天来实现这个功能,先预览一下: 捋一下思路,分为三步走: 点击发送按钮,调用后端接口后端接口处理内部,发送http接口请求后端接口把响应返回给前端展示 一.http客户端选型 为了更方

随机推荐

其他