Vue-axios 在vue cli中封装
common/post.js
import axios from 'axios' // 引入axios
import qs from 'qs' // 引入qs
axios.defaults.baseURL = '/apis' //请求地址的域名(此处使用了代理所以直接填/apis // 拦截响应response,进行错误处理
axios.interceptors.response.use(function (response) {
// 成功处理
// code处理
response.code = response.data.code
switch (response.status) {
case 200:
break;
case 400: response.data.msg = '错误请求'
break;
case 401: response.data.msg = '未授权,请重新登录'
break;
case 403: response.data.msg = '拒绝访问'
break;
case 404: response.data.msg = '请求错误,未找到该资源'
break;
case 405: response.data.msg = '请求方法未允许'
break;
case 408: response.data.msg = '请求超时'
break;
case 500: response.data.msg = '服务器端出错'
break;
case 501: response.data.msg = '网络未实现'
break;
case 502: response.data.msg = '网络错误'
break;
case 503: response.data.msg = '服务不可用'
break;
case 504: response.data.msg = '网络超时'
break;
case 505: response.data.msg = 'http版本不支持该请求'
break;
}
return response;
}, function (error) { return Promise.reject(error);
}); async function requestGet(options) {
// 这里主要是post方法的封装,get方法同理
options.method = 'post'
if (options.config === 'formData') {
options.headers = {'Content-Type': 'multipart/form-data'}
} else {
options.data = qs.stringify(options.data)
}
return new Promise((resolve,reject) => {
axios(options).then(res => {
// 这里主要根据后来返回的数据作判断,请根据实际情况
if(res.data.code == '200') {
resolve(res.data)
} else {
reject(res.data)
}
}).catch(error => {
// 显示拦截器对respone处理后的可读错误
console.log(error)
})
})
} export default { requestGet }
main.js
import Post from '../static/js/post.js'/*post公共*/ const { requestPost } = Post/*post*/ Vue.prototype.$requestPost = requestPost // post挂载到全局上
页面中:
acceptlist(){
this.$requestGet({
url: this.http+'/cdk/paperTypeMobile/findList',
data: {}
}).then(res => {
console.log(res)
this.columns=res.obj
}).catch(err=>{
console.log(err)
})
}
注:main.js和post.js中要引入axios、qs
Vue-axios 在vue cli中封装的更多相关文章
- vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...
- vue axios 简单封装以及思考
先安装 axios npm install axios axios的详细介绍以及用法 就不多说了请 移步 github ➡️ https://github.com/axios/axios 下面是简单 ...
- vue axios 封装(二)
封装二: http.js import axios from 'axios' import storeHelper from './localstorageHelper' // 全局设置 const ...
- axios在Vue中的简单应用(一)
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
- (vue.js)axios interceptors 拦截器中添加headers 属性
(vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...
- axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)
Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...
- 【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目
使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g ...
- vue axios配置 发起请求加载loading请求结束关闭loading
axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...
- vue+axios+promise实际开发用法
axios它是基于promise的http库,可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护,直接推荐axios库,小编我也是从vue-res ...
随机推荐
- 一文纵览EMAS 到底内含多少阿里核心技术能力
申请阿里云EMAS,体验一站式移动研发平台,更多精彩尽在开发者会场 EMAS的整体定位是阿里巴巴移动技术对外输出的主窗口,沉淀了阿里巴巴近10年在移动互联网技术架构上的积累以及在一系列垂直场景中所实践 ...
- sas教程
http://web5.pku.edu.cn/pucssr/SASbiancheng.pdf 本教程中的主题将向您介绍 SAS Enterprise Guide.您最好依次浏览这些主题. 概述 启动项 ...
- BOT建设经营转让,PPP公私合作
PPP.BOT两种模式有什么区别? BOT模式(build-operate-transfer),由投资方建设并专营一定期限最后移交政府的方式:PPP模式(public-private-partners ...
- SpringMvc表单标签库
HTML密码框 <td><form:label path="password">密码:</form:label></td><t ...
- 二.python数据结构的性能分析
目录: 1.引言 2.列表 3.字典 一.引言 - 现在大家对 大O 算法和不同函数之间的差异有了了解.本节的目标是告诉你 Python 列表和字典操作的 大O 性能.然后我们将做一些基于时间的实验来 ...
- database homework1
mysql> select * from teacher_info; +----+------+-----+--------+---------+ | id | name | age | sal ...
- Mongodb停止和启动
mongodb开启.停止.重启操作 #开启service mongodb start#停止service mongodb stop#重启service mongodb restart
- 封装好的PDO类
封装PDO类,方便使用: <?php header('content-type:text/html;charset=utf-8'); /** * 封装PDODB类 */ // 加载接口 // i ...
- Nuxt.js打造旅游网站第2篇_首页开发
页面效果: 1.初始化默认布局 nuxtjs提供了一个公共布局组件layouts/default.vue,该布局组件默认作用于所有页面,所以我们可以在这里加上一些公共样式,在下一小结中还会导入公共组件 ...
- SGU 101 Domino【欧拉路径】
题目链接: http://acm.sgu.ru/problem.php?contest=0&problem=101 题意: N个多米诺骨牌,每个骨牌左右两侧分别有一个0~6的整数(骨牌可以旋转 ...