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 全局安 ...
随机推荐
- Java io流的学习
近期几天细致学了Java的io流.本来是打算看视频通过视频来学习的.但是后来发现事实上视频看不怎么懂也感觉不是非常easy上手,所以就通过百度和api文档学习了Java的io流 io流能够有两个分类, ...
- win7中下mysql-5.6.22免安装配置
windows下mysql免安装配置 1. 下载mysql免安装压缩包 下载mysql-5.6.22-winx64.zip 解压到本地D:\mysql-5.6.22-winx64 2. 修改配置文件 ...
- QVBoxLayout移除控件之后没有消失
想在QWidget里面动态的添加和删除控件,给QWidget设置了一个布局管理器QVBoxLayout,要删除控件可以 使用QVBoxLayout::removeWidget(QWidget *w)方 ...
- 设计模式之Build(生成者模式)
一.生成器模式的定义: 生成器模式也称为建造者模式.生成器模式的意图在于将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示(GoF).在软件设计中,有时候面临着一个非常复杂的对象的创 ...
- 57.C++处理转义字符
#include <iostream> #include <string> #include <cstdlib> using namespace std; void ...
- freeMark
1. 什么是freemark Freemaker是一个”模板引擎”,也可以说是一个基于模板技术的生成文本输出的一个通用工具 2.一般的用途: l 能用来生成任意格式的文本:HTML,XML ...
- HDU 4107 Gangster
Gangster Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 4 ...
- 基本3D变换之World Transform, View Transform and Projection Transform
作者:i_dovelemon 来源:CSDN 日期:2014 / 9 / 28 主题:World Transform, View Transform , Projection Transform 引言 ...
- iTOP-4412 nfs文件系统启动
kernel command line type: 普通文件系统(本地)启动:root=/dev/mmcblk0p2 rootfstype=ext4 init=/linuxrc console=tty ...
- js上传文件(图片)的格式和大小限制
如果你想快速解决这个问题,看本文就够了.查了好多资料,终于解决了,太耗时间了,本文留给给后来者,希望你们工作的更轻松 本文保存为.html文件用浏览器打开即可测试功能 <form id=&quo ...