标准的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的全局配置的更多相关文章

  1. Django day32 跨域问题,创建vue项目,axios的使用

    一:跨域问题 1.同源策略(浏览器的安全策略) 只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了 2.cors:只要服务器实现了CORS,就可以 ...

  2. vue项目使用axios发送请求让ajax请求头部携带cookie

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...

  3. vue项目中 axios 和Vue-axios的关系

    文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码:   今天看到有些项目是这样写的,就有点看不懂了.  ----解 ...

  4. vue-cli新建vue项目安装axios后在IE下报错

    使用脚手架新建了一个vue项目,可以在IE9+浏览器运行,但是在添加了axios后,在IE下就报错了 首先是安装axios,在命令行执行: $ npm install axios -s //执行命令, ...

  5. vue-cli 引入 axios 并全局配置axios

    步骤一:vue add axios (向项目添加axios) 步骤二:在main.js 中 修改 如图 步骤三:在组件使用时,直接 this.$http.get().then() 即可......

  6. vue证明题三,vue项目的包结构和配置

    用vue-cli创建的项目带有自动配置好的包结构,包结构都是固定的. 关于详细的解释,网上多得是,只说下最重要的内容 1.vue项目包结构和端口号配置 这里笔者下了个HBuilderX来写代码. 2. ...

  7. Vue项目零碎知识(全局js,css配置,element-UI,bs使用, img动态配置,js数组)

    全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/ ...

  8. vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输

    在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...

  9. vue项目引用 iView 组件——全局安装与按需加载

    框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库.使用方法官网很详细. 官网:https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安 ...

随机推荐

  1. android 图片特效处理之光照效果

    这篇将讲到图片特效处理的光照效果.跟前面一样是对像素点进行处理,算法是通用的. 算法原理:图片上面的像素点按照给定圆心,按照圆半径的变化,像素点的RGB值分别加上相应的值作为当前点的RGB值. 例: ...

  2. 52. nodejs报错:Cannot find module 'ejs'

    转自:https://blog.csdn.net/u010142437/article/details/79012605 错误显示: Error: Cannot find module 'ejs'  ...

  3. 39.C语言操作数据库

    一.准备工作: sqlite3工具集:链接:https://pan.baidu.com/s/1mjufXZa 密码:2ui7 安装步骤: 打开如下文件夹,找到sqlite3.dll,并放入系统目录 2 ...

  4. Android java.lang.NoSuchFieldError: No static field xxx of type I in class Lcom/XX/R$id; or its superclasses

    项目开发快到尾声,突然发现之前一个模块莫名其妙的奔溃了,我的内心也是奔溃的.以前一直都是好好的,也没去动过它,为啥会出现这样的问题呢? 下面我会根据自己的理解来看待问题 android是怎么根据id查 ...

  5. 如何监控和解决SQL Server的阻塞(1) (当前阻塞)

    1. 什么是"阻塞"? 阻塞是SQL数据库应用"锁"机制的一个副作用.当一个应用请求针对某个数据库对象(例如全表,某行数据, 或者是某个数据页)加锁后,那么这个 ...

  6. vue 使用同一组件,切换时不触发created、mounted钩子

    两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子. 方法一:通过watch $route的变化来做处理 watch: { $route() { ...

  7. 【Henu ACM Round #12 C】 Alice, Bob, Two Teams

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑任意两个字符串(a,b) 假设a在b的前面 那么如果a+b>=b+a 这里的+表示字符串的链接 那么显然需要交换a,b的位 ...

  8. 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) C】 Travelling Salesman and Special Numbers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 会发现. 进行一次操作过后. 得到的数字肯定是<=1000的 然后1000以下可以暴力做的. 则我们枚举第1步后得到的数字x是 ...

  9. Android Cordova 插件开发之编写自己定义插件

    前言 本文适合Android+web的复合型人才,由于cordova本身就是混合开发,所以在Android开发的基础上,还要懂web相关技术(HTML+CSS+JS).可是也有例外,比方我.仅仅需负责 ...

  10. js18--继承方式

    方式1:子类.prototype = 父类对象 Boy.prototype = new Person(); Sub.prototype = new Sup('张三');   //可以传参数也可以不传 ...