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 全局安 ...
随机推荐
- 59.node的serve-favicon中间件的使用
转自:https://www.zhi-jie.net/node-serve-favicon-use/ 有一个名称为serve-favicon的中间件,可以用于请求网页的favicon图标.譬如如下的使 ...
- LA 2531 The K-league 最大流
#include <iostream> #include <cstdio> #include <fstream> #include <algorithm> ...
- spark network-common
概述 Spark底层使用netty作为节点间通信的桥梁.其实现在common/network-common包中.common/network-common包主要是对netty进行了一层封装,主要是定义 ...
- Java: 数据类型
核心:对事物的某种规范 前提: 1.JAVA:JAVA程序的运行是以堆栈的操作来完成的 堆栈以帧为单位保存线程的状态. JVM对堆栈只进行两种操作:以帧为单位的压栈和出栈操作. 理解 ...
- Python的正则表达概述
本文介绍了Python对于正则表达式的支持,包括正则表达式基础以及Python正则表达式标准库的完整介绍及使用示例.本文的内容不包括如何编写高效的正则表达式.如何优化正则表达式,这些主题请查看其他教程 ...
- 【Uva 10163】Storage Keepers
[Link]: [Description] 你有n(n≤100)个相同的仓库.有m(m≤30)个人应聘守卫,第i个应聘者的能力值 为Pi(1≤Pi≤1000).每个仓库只能有一个守卫,但一个守卫可以看 ...
- AQS -> AbstractQueuedSynchronizer
前言 : 先说说这个 CLH锁: 加锁 1. 创建一个的需要获取锁的 Node 2. 通过 CAS操作 让自己 成为这个尾部的节点,然后令 设置自己的pre 3. 自旋,直到pre节点释放 释放: 1 ...
- softInputMode- 软件盘监听事件
软件盘的监听事件,如下 private final OnKeyListener mSubjectKeyListener = new OnKeyListener() { @Override public ...
- linux创建新用户并给予root权限
root比windows的系统管理员的能力更大,足以把整个系统的大部分文件删掉,导致系统完全毁坏,不能再次使用.所以,用root进行不当的操作是相当危险的,轻微的可以死机,严重的甚至不能开机.所以,在 ...
- 洛谷 P1223 排队接水
洛谷 P1223 排队接水 题目描述 有n个人在一个水龙头前排队接水,假如每个人接水的时间为Ti,请编程找出这n个人排队的一种顺序,使得n个人的平均等待时间最小. 输入输出格式 输入格式: 输入文件共 ...