main.js 中:

import axios from '................/axios'

axios.js 中:

//axios.js
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios //http request 封装请求头拦截器
axios.interceptors.request.use(config => {
// console.log("request")
// console.log(config) //请求方式
let method = config.method.toLowerCase();
if (method === 'get' || method === 'delete') {
Object.assign(config.params, {
"test": "testVAl"
});
}
return config;
}, error => {
return Promise.reject(err);
}); //http response 封装后台返回拦截器
axios.interceptors.response.use(response => {
// console.log(response)
//当返回信息为未登录或者登录失效的时候重定向为登录页面
// if (response.data.code == 'W_100004' || response.data.message == '用户未登录或登录超时,请登录!') {
// router.push({
// path: "/",
// querry: {
// redirect: router.currentRoute.fullPath
// } //从哪个页面跳转
// })
// }
if (typeof response.data === 'string') {
return JSON.parse(response.data);
} else {
return response;
}
}, error => {
return Promise.reject(error)
});

使用:

this.$http.get('/api/......', {params:{}}).then(res => {
console.log(res)
}, res => {
// error callback
});

vue中axios 配置请求拦截功能 及请求方式如何封装的更多相关文章

  1. vue中axios配置代理的俩种方式及优缺点

    概述:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 当我们使用vue向服务器发送AJAX请求时,我们会遇到跨域问题,一般跨域的解决方案有俩种,一种是官 ...

  2. vue中axios的安装使用

    axios是一个基于 promise 的 HTTP 库,在vue中axios是比较常用的网络请求方法. 安装 npm install axios -S 在main.js配置 import axios ...

  3. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  4. vue中axios使用二:axios以post,get,jsonp的方式请求后台数据

    本文为博主原创,转载请注明出处 axios在上一篇中讲过:vue中axios使用一:axios做拦截器,axios是请求后台资源的模块,用来请求后台资源. axios本身是支持get,post请求后台 ...

  5. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  6. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  7. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  8. vue中axios的深入使用

    如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用  先对工具类进行封装utils/axios.js: // 引入模 ...

  9. vue中怎样实现 路由拦截器

    vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效) 在 我们需要实现这样 一个功能,登录拦截 其实就是 路由拦截,首先在定义 ...

随机推荐

  1. HGOI 20190310 题解

    /* 又是又双叒叕WA的一天... 我太弱鸡了... 今天上午打了4道CF */ Problem 1 meaning 给出q组询问,求下列函数的值$ f(a) = \max\limits_{0 < ...

  2. [luogu1341]无序字母对【欧拉回路】

    题目描述 给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有n+1个字母的字符串使得每个字母对都在这个字符串中出现. 分析 欧拉回路的模板题. 暴力删边欧拉 ...

  3. 面试---Python中的模块和包是什么?

    python模块是: 自我包含并且有组织的代码片段为模块. 表现形式为:写的代码保存为文件.这个文件就是一个模块.sample.py 其中文件名smaple为模块名字. python包是: 包是一个有 ...

  4. webpack入门(四)webpack的api 2 module

    接着介绍webpack的module. module Options affecting the normal modules (NormalModuleFactory)  这些选项影响普通的模块 m ...

  5. css 禁止选中文本

    css 如何禁止选中文字 .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* ...

  6. 【洛谷P3901】数列找不同

    题目大意:给定一个长度为 N 的序列,每个点被染了一个颜色.现有 M 个询问,每个询问查询区间 [l,r] 内的点是否颜色都是不同的. 题解:莫队裸题. 直接维护区间颜色数,用 cnt[] 记录下区间 ...

  7. 回调函数: 一定要在函数名前加上 CALLBACK,否则有可能引起内存崩溃!

    今天又遇到一个莫名其妙的内存崩溃问题,问题代码 EnumChildWindows(...): EnumChildWindows(hwnd_panel_text_watermark, (WNDENUMP ...

  8. JavaScrip相关知识总结

    1.javascript是一种基于对象的语言,其中有四个常用的“全局对象”的成员使用,因为没有“全局对象关键字global”而直接使用,所以感觉像违背了JavaScript基于对象编程的原则,但其实是 ...

  9. 关于字符编码,你所需要知道的(ASCII,Unicode,Utf-8,GB2312…)

    字符编码的问题看似很小,经常被技术人员忽视,但是很容易导致一些莫名其妙的问题.这里总结了一下字符编码的一些普及性的知识,希望对大家有所帮助. 还是得从ASCII码说起 说到字符编码,不得不说ASCII ...

  10. plink: 等位型计数(allele count)

    对genotype的等位型进行计数,需要用到以下参数: --freq Allele frequencies--counts Modifies --freq to report actual allel ...