vue项目对axios的全局配置
标准的vue-cli项目结构(httpConfig文件夹自己建的):

api.js:
//const apiUrl = 'http://test';//测试域名,自己改成自己的
const apiUrl = 'http://xxoo';//线上域名,自己改成自己的 export default apiUrl
http.js:
/**
* ajax请求配置
*/
import axios from 'axios'
import apiURL from './api.js'
//import Qs from 'qs' import cookie from '../../static/js/cookie.js' // axios默认配置
axios.defaults.timeout = 10000; // 超时时间
axios.defaults.baseURL = apiURL; // 默认地址 //整理数据
axios.defaults.transformRequest = function (data) {
//data = Qs.stringify(data);
data = JSON.stringify(data);
return data;
}; // 路由请求拦截
// http request 拦截器
axios.interceptors.request.use(
config => {
//config.data = JSON.stringify(config.data);
config.headers['Content-Type'] = 'application/json;charset=UTF-8';
//判断是否存在ticket,如果存在的话,则每个http header都加上ticket
if (cookie.get("token")) {
//用户每次操作,都将cookie设置成2小时
cookie.set("token",cookie.get("token") ,1/12)
cookie.set("name",cookie.get("name") ,1/12)
config.headers.token = cookie.get("token");
config.headers.name= cookie.get("name");
}
return config;
},
error => {
return Promise.reject(error.response);
});
// 路由响应拦截
// http response 拦截器
axios.interceptors.response.use(
response => {
if (response.data.resultCode=="404") {
console.log("response.data.resultCode是404")
// 返回 错误代码-1 清除ticket信息并跳转到登录页面
// cookie.del("ticket")
// window.location.href='http://login.com'
return
}else{
return response;
}
},
error => {
return Promise.reject(error.response) // 返回接口返回的错误信息
});
export default axios;
main.js
import axios from './httpConfig/http'
Vue.prototype.$http = axios
请求示例:
//post
this.$http.post('/itemProps/addItemProps',{
name: this.name,
parentId:this.parentId,
sortOrder:0
}).then((res)=>{
console.log(res)
}).catch((err)=>{
alert("请求失败")
})
//get
this.$http.get("/roles/getPersonnelInfoRoles",{
params:{
key:"value"
}
}).then((res) => {
console.log(res)
}).catch((err)=>{
alert("请求失败")
})
vue项目对axios的全局配置的更多相关文章
- Django day32 跨域问题,创建vue项目,axios的使用
一:跨域问题 1.同源策略(浏览器的安全策略) 只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了 2.cors:只要服务器实现了CORS,就可以 ...
- vue项目使用axios发送请求让ajax请求头部携带cookie
最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...
- vue项目中 axios 和Vue-axios的关系
文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码: 今天看到有些项目是这样写的,就有点看不懂了. ----解 ...
- vue-cli新建vue项目安装axios后在IE下报错
使用脚手架新建了一个vue项目,可以在IE9+浏览器运行,但是在添加了axios后,在IE下就报错了 首先是安装axios,在命令行执行: $ npm install axios -s //执行命令, ...
- vue-cli 引入 axios 并全局配置axios
步骤一:vue add axios (向项目添加axios) 步骤二:在main.js 中 修改 如图 步骤三:在组件使用时,直接 this.$http.get().then() 即可......
- vue证明题三,vue项目的包结构和配置
用vue-cli创建的项目带有自动配置好的包结构,包结构都是固定的. 关于详细的解释,网上多得是,只说下最重要的内容 1.vue项目包结构和端口号配置 这里笔者下了个HBuilderX来写代码. 2. ...
- Vue项目零碎知识(全局js,css配置,element-UI,bs使用, img动态配置,js数组)
全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/ ...
- vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输
在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...
- vue项目引用 iView 组件——全局安装与按需加载
框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库.使用方法官网很详细. 官网:https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安 ...
随机推荐
- 关于vuex的项目中数据流动方式
vue的核心是数据驱动,所有数据变更的时机很重要,也就是watch的内容,一般是数据逻辑的操作.在使用vuex的项目中,我们在vuex中只是发请求.拿数据,在视图中来进行逻辑的操作.数据的更新. 1. ...
- HTTP服务器状态码定义
HTTP服务器状态代码定义 1.1 消息1xx(Informational 1xx) 该类状态代码用于表示临时回应.临时回应由状态行(Status-Line)及可选标题组成, 由空行终止.HTTP/1 ...
- K短路 spfa + A*
#include <stdio.h> #include <string.h> #include <queue> #include <algorithm> ...
- C/C++(文件操作二)
二进制读写才是本质 二进制的读写对文件标记不敏感. eg: 对图片进行加密与解密: 用命令的形式去执行: //xx.exe -c src dest 加密 //xx.exe -d src dest 解密 ...
- new不抛出异常nothrow与new_handler
可以看这里: http://blog.csdn.net/huyiyang2010/article/details/5984987 现在的new是会抛出异常的,bad::alloc 如果不想抛出异常两种 ...
- C++怎么访问私有变量和函数
用指针呀,了解C++内存结构的话. 1. 对于私有成员变量,可以用指针来访问. 2. 对于虚函数,也可以用指针来访问. 3. 另外,对于私有成员,如果摸不准地址构造,可以先构造一个结构相似的类,然后增 ...
- VC多线程临界区
在使用多线程时,一般非常少有多个线程全然独立的工作.往往是多个线程同一时候操作一个全局变量来获取程序的执行结果.多个线程同一时候訪问同一个全局变量,假设都是读取操作,则不会出现故障. 假设是写操作,则 ...
- apue和unp的学习之旅07——多种边界条件的讨论
了解一些边界条件,通过观察这些情形,弄清在网络层次发生什么以及它们怎样反映到套接字api,这将很多其它地理解这些层次的工作原理,体会怎样编写应用程序来处理这些情形. //--------------- ...
- js30--代理模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- <meta-data>的使用
在AndroidManifest.xml中,<meta-data>元素可以作为子元素,被包含在<activity>.<application> .<servi ...