标准的vue-cli项目结构(httpConfig文件夹自己建的):

api.js:

  1. //const apiUrl = 'http://test';//测试域名,自己改成自己的
  1. const apiUrl = 'http://xxoo';//线上域名,自己改成自己的
  2.  
  3. export default apiUrl

http.js:

  1. /**
  2. * ajax请求配置
  3. */
  4. import axios from 'axios'
  5. import apiURL from './api.js'
  6. //import Qs from 'qs'
  7.  
  8. import cookie from '../../static/js/cookie.js'
  9.  
  10. // axios默认配置
  11. axios.defaults.timeout = 10000; // 超时时间
  12. axios.defaults.baseURL = apiURL; // 默认地址
  13.  
  14. //整理数据
  15. axios.defaults.transformRequest = function (data) {
  16. //data = Qs.stringify(data);
  17. data = JSON.stringify(data);
  18. return data;
  19. };
  20.  
  21. // 路由请求拦截
  22. // http request 拦截器
  23. axios.interceptors.request.use(
  24. config => {
  25. //config.data = JSON.stringify(config.data);
  26. config.headers['Content-Type'] = 'application/json;charset=UTF-8';
  27. //判断是否存在ticket,如果存在的话,则每个http header都加上ticket
  28. if (cookie.get("token")) {
  29. //用户每次操作,都将cookie设置成2小时
  30. cookie.set("token",cookie.get("token") ,1/12)
  31. cookie.set("name",cookie.get("name") ,1/12)
         config.headers.token = cookie.get("token");
         config.headers.name= cookie.get("name");
  1. }
  2. return config;
  3. },
  4. error => {
  5. return Promise.reject(error.response);
  6. });
  7. // 路由响应拦截
  8. // http response 拦截器
  9. axios.interceptors.response.use(
  10. response => {
  11. if (response.data.resultCode=="404") {
  12. console.log("response.data.resultCode是404")
  13. // 返回 错误代码-1 清除ticket信息并跳转到登录页面
  14. // cookie.del("ticket")
  15. // window.location.href='http://login.com'
  16. return
  17. }else{
  18. return response;
  19. }
  20. },
  21. error => {
  22. return Promise.reject(error.response) // 返回接口返回的错误信息
  23. });
  24. export default axios;

main.js

  1. import axios from './httpConfig/http'
  2. Vue.prototype.$http = axios

请求示例:

  1. //post
    this.$http.post('/itemProps/addItemProps',{
  2.   name: this.name,
  3.   parentId:this.parentId,
  4.   sortOrder:0
  5. }).then((res)=>{
      console.log(res)
  6. }).catch((err)=>{
  7. alert("请求失败")
  8. })
    //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. Unix/Linux环境C编程新手教程(37) shell经常使用命令演练

     cat命令 cat命令能够用来查看文件内容. cat [參数] 文件名称. grep-指定文件里搜索指定字符内容. Linux的文件夹或文件. -path '字串' 查找路径名匹配所给字串的全部 ...

  2. jquery--延迟对象

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. POJ 2391 Floyd+二分+拆点最大流

    题意: 思路: 先Floyd一遍两两点之间的最短路 二分答案 建图 跑Dinic 只要不像我一样作死#define int long long 估计都没啥事-- 我T到死辣--.. 最后才改过来-- ...

  4. Can't access RabbitMQ web management interface after fresh install

    http://stackoverflow.com/questions/22850546/cant-access-rabbitmq-web-management-interface-after-fres ...

  5. 1>LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    解决方法如下:项目\属性\配置属性\清单工具\输入和输出\嵌入清单:原来是“是”,改成“否”. 终极解决方案:VS2010在经历一些更新后,建立Win32 Console Project时会出“err ...

  6. 2017国家集训队作业[agc006f]Blackout

    2017国家集训队作业[agc006f]Blackout 题意: 有一个\(N*N\)的网格,一开始有\(M\)个格子被涂黑,给出这\(M\)个格子,和染色操作:如果有坐标为\((x,y),(y,z) ...

  7. android-pulltorefresh 下拉载入中使用gif动图

    效果预览: xml布局 <com.handmark.pulltorefresh.library.PullToRefreshListView xmlns:android="http:// ...

  8. [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 ...

  9. c# 查询sql 返回多个參数

    1.依据须要查询mysql 语句,返回三个须要的參数,不是数据集 2.编写函数例如以下: public static void GetParas(string 条件1, out string 返回值1 ...

  10. intent- 启动其他应用

    今天需要在图库中实现对相机的调用,代码如下 Intent intent = new Intent(Intent.ACTION_VIEW); ComponentName componetName = n ...