axios全局注册,设置token,以及全局设置url请求网段的方法

a1.axios全局注册

axios不同 与vue-resource不能在import axios from 'axios'后使用Vue.use(axios),axios不是插件，要想全局使用axios应该修改其原型链，代码如下

import axios from 'axios'
Vue.prototype.$axios=axios

这样 axios就全局注册好了，要使用axios，只需要这样

this.$axios.post("/login", this.form).then((response) => {

  } else {

  }
  });

使用this.$axios 就可以了。

2.axios设置头部token.

设置token需要使用axios拦截器代码如下

const url='192.137.8080/api'/*设置全局请求地址*/
axios.interceptors.request.use(
  config => {
  let token = localStorage.getItem("x-auth-token");
  if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
   config.headers.token = `${token}`;
  }
  if (config.url.indexOf(url) === -1) {
   config.url = url + config.url;/*拼接完整请求路径*/
  }
  return config;
  },
  err => {
  return Promise.reject(err);
  });

以上这篇axios全局注册,设置token,以及全局设置url请求网段的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue axios请求超时的正确处理方法

    自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历. 具体原因 最近公司在做一个项目, 服务端数据接口用的是Php输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown. 按照搜索引擎给出来的解决方案,解决不了我的问题. 最近在研究AOP这个开发编程的概念,axios开发说明里边提到的栏截器(axios.Inter

  • axios全局注册,设置token,以及全局设置url请求网段的方法

    a1.axios全局注册 axios不同 与vue-resource不能在import axios from 'axios'后使用Vue.use(axios),axios不是插件,要想全局使用axios应该修改其原型链,代码如下 import axios from 'axios' Vue.prototype.$axios=axios 这样 axios就全局注册好了,要使用axios,只需要这样 this.$axios.post("/login", this.form).then((re

  • jQuery获取URL请求参数的方法

    本文实例讲述了jQuery获取URL请求参数的方法.分享给大家供大家参考.具体如下: $.extend({ getUrlVars: function(){ var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].

  • vue axios重复点击取消上一次请求封装的方法

    使用场景 重复点击或者多tab标签使用一个视图等(当然也可以用加载中或者透明背景禁止请求中再次点击) 封装代码 来自于互联网 let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识 let cancelToken = axios.CancelToken; let removePending = (config) => { for(let p in pending){ if(pending[p].u === config.url + '&' + conf

  • vue中axios防止多次触发终止多次请求的示例代码（防抖）

    需求 例如在搜索框中,并不是你输入一个字就需要渲染一次数据,而是取最后一次的输入内容进行搜索. 连续按下 AAAAA ,只取最后一次按下时搜索框的内容(即:AAAAA)进行搜索. 而不是搜索跟 A(第一次按下),AA(第二次按下),AAA相关联的内容 本文例子:  检测用户输入的值,监测这个值,然后根据值调用接口查询结果 代码: <template> <input type="text" v-model="message"> <temp

  • axios全局请求参数设置,请求及返回拦截器的方法

    应用场景: 1,每个请求都带上的参数,比如token,时间戳等. 2,对返回的状态进行判断,比如token是否过期 代码如下: axios.interceptors.request.use( config => { var xtoken = getXtoken() if(xtoken != null){ config.headers['X-Token'] = xtoken } if(config.method=='post'){ config.data = { ...config.data, _

  • 关于axios如何全局注册浅析

    前言 最近用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() (详细介绍可以参考这篇文章),所以在每个 .vue 文件中使用 axios 时就需要 import , .vue 文件少的话还好说,多的话未免有点麻烦. 后来想了想,能不能直接把 axios 加到 Vue 的原型中,这样就达到了全局注册了.下面话不多说了,来一看看详细的介绍吧. 方法如下: 1. 首先在 main.js 中引入 axios import Vue from 'vue' import

  • Vue axios全局拦截 get请求、post请求、配置请求的实例代码

    下面通过一段代码给大家介绍Vue axios全局拦截 get请求.post请求.配置请求,具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.js"&g

  • 使用Feign设置Token鉴权调用接口

    目录 Feign设置Token鉴权调用接口 声明FeignClient指定url 调用测试 返回对象可以封装demo 先去implementsRequestInterceptor重写apply方法 配置拦截器 Feign调用进行Token鉴权 项目场景 解决办法 具体实现 注意有Bug!!! Feign设置Token鉴权调用接口 声明FeignClient 指定url /**  * CREATE BY songzhongjin ON 2021.05.08 15:58 星期六  * DESC:fe

  • Postman全局注册方法及对返回数据可视化处理

    目录 1.全局方法注册及使用 1.1 注册 1.2全局方法使用 2. 可视化 1.全局方法注册及使用 1.1 注册 在collection最外层中Pre-request Script中编写全局方法 // 开发者本机ip const globalDevIp = 'http://172.16.65.46:9191' // 全局变量 pm.globals.set("variable_key", "variable_value"); var moment = require

  • C#全局热键设置与窗体热键设置实例

    本文实例讲述了C#全局热键设置与窗体热键设置,分享给大家供大家参考.具体实现方法如下: 1.窗体热键 首先要设置主窗体KeyPreview为true,可直接在属性中进行设置, 或者在窗体加载中设置: this.KeyPreview = true; 然后添加窗体KeyDown事件,如下: 复制代码 代码如下: private void FrmMain_KeyDown(object sender, KeyEventArgs e) {     if (e.Alt && e.Shift &

随机推荐