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 全局安 ...
随机推荐
- Unix/Linux环境C编程新手教程(37) shell经常使用命令演练
cat命令 cat命令能够用来查看文件内容. cat [參数] 文件名称. grep-指定文件里搜索指定字符内容. Linux的文件夹或文件. -path '字串' 查找路径名匹配所给字串的全部 ...
- jquery--延迟对象
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- POJ 2391 Floyd+二分+拆点最大流
题意: 思路: 先Floyd一遍两两点之间的最短路 二分答案 建图 跑Dinic 只要不像我一样作死#define int long long 估计都没啥事-- 我T到死辣--.. 最后才改过来-- ...
- Can't access RabbitMQ web management interface after fresh install
http://stackoverflow.com/questions/22850546/cant-access-rabbitmq-web-management-interface-after-fres ...
- 1>LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
解决方法如下:项目\属性\配置属性\清单工具\输入和输出\嵌入清单:原来是“是”,改成“否”. 终极解决方案:VS2010在经历一些更新后,建立Win32 Console Project时会出“err ...
- 2017国家集训队作业[agc006f]Blackout
2017国家集训队作业[agc006f]Blackout 题意: 有一个\(N*N\)的网格,一开始有\(M\)个格子被涂黑,给出这\(M\)个格子,和染色操作:如果有坐标为\((x,y),(y,z) ...
- android-pulltorefresh 下拉载入中使用gif动图
效果预览: xml布局 <com.handmark.pulltorefresh.library.PullToRefreshListView xmlns:android="http:// ...
- [Redux-Observable && Unit testing] Testing the output of epics
Epics can be unit-tested just like any other function in your application - they have a very specifi ...
- c# 查询sql 返回多个參数
1.依据须要查询mysql 语句,返回三个须要的參数,不是数据集 2.编写函数例如以下: public static void GetParas(string 条件1, out string 返回值1 ...
- intent- 启动其他应用
今天需要在图库中实现对相机的调用,代码如下 Intent intent = new Intent(Intent.ACTION_VIEW); ComponentName componetName = n ...