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 ...
随机推荐
- 【php】php开发的前期准备
原文来自:http://www.cnblogs.com/sows/p/6867675.html (博客园的)风马一族 侵犯版本,后果自负 php介绍 什么php? 一种服务器端的 HTML 脚本/编程 ...
- date、cal和clear命令
一.date命令 date命令的功能:date命令是显示或设置系统时间与日期. 很多shell脚本里面需要打印不同格式的时间或日期,以及要根据时间和日期执行操作.延时通常用于脚本执行过程中提供一段等待 ...
- 2018-11-21-WPF-解决-ViewBox--不显示线的问题
title author date CreateTime categories WPF 解决 ViewBox 不显示线的问题 lindexi 2018-11-21 09:37:53 +0800 201 ...
- More Effective C++: 02操作符
05:谨慎定义类型转换函数 有两种函数允许编译器进行隐式类型转换:单参数构造函数(single-argument constructors)和隐式类型转换运算符.单参数构造函数是指只用一个参数即可以调 ...
- TIJ——Chapter Ten:Inner Classes
先提纲挈领地来个总结: 内部类(Inner Class)有四种: member inner class,即成员内部类.可以访问外部类所有方法与成员变量.生成成员内部类对象的方法:OuterClass. ...
- C++复制初始化的限制
相比于直接初始化,复制初始化有更加严格的限制. 1:在复制初始化时,不能使用声明为explicit的构造函数进行的隐式转换.而直接初始化则是允许的: struct Exp { explicit Exp ...
- oracle函数 RAWTOHEX(c1)
[功能]将一个二进制构成的字符串转换为十六进制 [参数]c1,二进制的字符串 [返回]字符串 [示例] select RAWTOHEX('A123') from dual;
- JavaScript 开发者都应该知道的十个概念
1. 原始值和引用值(Value vs. Reference) 理解对象.数组和函数是如何复制和传递到函数中的.了解引用值是被复制了什么,理解原始值是通过复制值来进行复制和传递的. 简析:ECMASc ...
- Python基础:07迭代器
迭代器是在版本 2.2 被加入Python 的,它为类序列对象提供了一个类序列的接口.Python 的迭代无缝地支持序列对象,而且它还允许迭代非序列类型,包括用户定义的对象.它的出现,对列表迭代.字典 ...
- 16-1 djanjo介绍
一 web框架的本质 1用户的浏览器(socket客户端) 和 网站的服务器(socket服务端)之间 2 HTTP协议: 1.1 请求(request) 1.2. 响应(response) 3 we ...