import axios from 'axios'import QSfrom 'qs';//import store from '@/store/index.js';

import { Message } from 'element-ui'; //element库的消息提示,可以不用//环境的切换//if (process.env.NODE_ENV == 'development') {//开发//axios.defaults.baseURL = '/api';}//else if (process.env.NODE_ENV == 'debug') {//测试//axios.defaults.baseURL = 'https://www.ceshi.com';//}//else if (process.env.NODE_ENV == 'production') {//线上//axios.defaults.baseURL = 'https://www.production.com';//}//请求超时时间

axios.defaults.timeout = 15000;//post请求头

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//请求拦截器

axios.interceptors.request.use(

config=>{//每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了

const token = '45f8f587-7b46-462f-a8c4-1ca4dc64a336';if (token) { //判断是否存在token,如果存在的话,则每个http header都加上token

config.headers.Token =token;

}returnconfig;

},

error=>{returnPromise.error(error);

});//响应拦截器

axios.interceptors.response.use(

response=>{if (response.status === 200) {returnPromise.resolve(response);

}else{returnPromise.reject(response);

}

},//服务器状态码不是200的情况

error =>{if(error.response.status) {

console.log(error)

}returnPromise.reject(error.response);

}

);

export functionget(url, params) {return new Promise((resolve, reject) =>{

axios.get(url,

{params: params})

.then(res=>{

resolve(res.data);

})

.catch(err =>{if (!err.response) {

Message({

showClose:true,

message:'get请求错误',

type:'error'});

}else{

reject(err.data);

console.log(err.response,'异常2');

}

})

});

}

export function post(url,params) {return new Promise((resolve, reject) =>{

axios.post(url,params)

.then(res=>{

resolve(res.data);

})

.catch(err =>{if (!err.response) {

Message({

showClose:true,

message:'post请求错误',

type:'error'});

}else{

reject(err.data);

console.log(err.response,'异常2');

}

})

});

}

exportdefault axios

vue打包后axios返回html,vue项目封装axios并访问接口相关推荐

  1. vue打包后css路径_Vue打包后访问静态资源路径问题

    Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...

  2. flask 渲染 vue 打包后的dist文件(直接用后端渲染)

    flask 渲染 vue 打包后的dist文件(直接用后端渲染) vue项目打包出dist文件 npm run build 代码 from flask import Flask from flask ...

  3. [vue] 怎么解决vue打包后静态资源图片失效的问题?

    [vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...

  4. vue打包后出现一些map文件的解决方法

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行  cnpm run build  开始 ...

  5. vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题

    大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后 ...

  6. 使用webpack打包后,vscode中vue代码变白色的解决办法

    使用webpack打包后,vscode中vue代码变白色的解决办法 卸载vetur,重装vetur

  7. vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理)

    vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...

  8. vue打包后element-ui部分样式(图标)异常问题

    vue打包后element-ui部分样式(图标)异常问题 参考文章: (1)vue打包后element-ui部分样式(图标)异常问题 (2)https://www.cnblogs.com/ljwsyt ...

  9. [vue] 怎么修改vue打包后生成文件路径?

    [vue] 怎么修改vue打包后生成文件路径? webpack:output.path vue-cli3: outputDir 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...

  10. vue 打包后,后缀名为.woff等字体问题不能用解决办法

    vue 打包后,后缀名为.woff等字体问题不能用解决办法 参考文章: (1)vue 打包后,后缀名为.woff等字体问题不能用解决办法 (2)https://www.cnblogs.com/mogu ...

最新文章

  1. 使用mysql内连接查询年龄_Mysql的连表查询
  2. 这是一个好问题:既然机器可以学习,它们能忘掉吗?
  3. alert()的功能_前端实现简单的图片上传小图预览功能
  4. DS1302示例子程序
  5. 隐藏文件夹设置被禁用,如何修复?
  6. java advance_JavaAdvance
  7. matlab feval 函数说明,Matlab feval函数
  8. 关于向MySQL插入一条新纪录的问题
  9. Android 系统 (128)---ODM 开发用户常见需求文档(二)
  10. 也许,真的有2012
  11. S5PV210 Uboot开发与移植01:Uboot概述
  12. Qt开源作品41-网络调试助手增强版V2022
  13. 股权转让要交哪些税?增值税、企业所得税、个人所得税
  14. 联通光猫 - KD-YUN-811E - 管理员密码破解
  15. 笔记本电脑禁用自带键盘
  16. gmail如何设置邮箱别名
  17. 支付宝二维码可以抓包更改金额_mac下 安卓模拟器抓包推荐 - _恒
  18. java将十进制数字转换成二进制
  19. void test();
  20. FTP电脑间传输文件

热门文章

  1. JavaScript编码风格指南
  2. 《C++游戏编程入门(第4版)》——2.4 使用带else子句的if语句序列
  3. DOS配合FastCopy实现远程增量备份
  4. OSChina 周四乱弹 —— 春天在哪里,春天在哪里?
  5. 〖Linux〗多个JDK版本之间快速切换
  6. notepad++ 设置常用快捷键
  7. NIX***检测方法
  8. linux分区合并不损坏系统,一次Linux磁盘损坏导致系统不可用恢复实例
  9. 医宗金鉴自学指南_自学《医宗金鉴》能学会中医吗?
  10. 微信一次发两个ajax请求,微信浏览器发送ajax请求执行多次解决方法