vue实现axios各种请求方法,并处理正常异常情况
在elementUI的admin项目中,如果与服务端交互是{"code":0,"msg":"提示信息","data":{}}
结构,可以使用下述请求封装方法
请求方法封装
定义一个网络类network.js
,内容为:
import axios from 'axios'
import Vue from 'vue'
import Qs from 'qs'
import {Loading} from 'element-ui'
var host = 'api前缀'
//axios.defaults.withCredentials = true // 跨域请求时发送cookie(本项目无意义)
export default {
//发起一个http request请求(请求地址,参数对象,成功的回调函数,失败的回调函数,请求方法)
request: function (url, params, success, failure = null, method = 'post') {
if (typeof success !== 'function') {
throw Error("success 必须是个函数");//开发阶段的错误
}
const loading = Loading.service({
lock: true,
text: '努力加载中...',//可以自定义文字
spinner: 'el-icon-loading',//自定义加载图标类名
background: 'rgba(0, 0, 0, 0.7)'//遮罩层背景色
});
//配置axios请求头,axios每次发起请求携带token,在Network中的headers看的到
axios.interceptors.request.use(config => {
config.timeout = 20000 //设置请求超时时间
config.headers['CLIENT-P'] = 'WEB'//设置请求头中的平台
config.headers['CLIENT-I'] = localStorage.getItem('uid') ? localStorage.getItem('uid') : 0 //设置请求头中的uid
config.headers['CLIENT-T'] = localStorage.getItem('token') ? localStorage.getItem('token') : ''//设置请求头中的token
return config
});
//请求方法:get/delete/head/post/put/patch
axios.post(host + url, Qs.stringify(params))
.then(function (res) {
let json = res.data;//服务器JSON对象
//正常返回,http状态码是200
if (!(json instanceof Object) || !json.hasOwnProperty('code') || json.code !== 0) {
let msg = json instanceof Object && json.hasOwnProperty('msg') ? json.msg : '数据结构出错,请联系管理员';
if (json.code % 1 !== 0) {
Vue.prototype.$message.error(msg);//code不是整数是异常
loading.close();
return false;
}
//状态大于0小于1000都表示业务逻辑无法继续
if (json.code < 1000) {
if (json.code === 110) {//为110踢出去,跳转到登录页
removeToken()//这个函数好像没有意义?
localStorage.removeItem('uid')
localStorage.removeItem('token')
window.location.href = '#/login'
}
if (typeof failure === 'function') {
failure({code: json.code, msg: msg, data: {}});//回调实现具体逻辑
} else {
Vue.prototype.$message.error(msg);//你不处理错误我来处理错误
}
loading.close();
return false;
}
Vue.prototype.$message.warning(msg);//警告1000~2000
//Vue.prototype.$message.error(Vue.prototype.$md5('123456'));
}
success(json);//回调实现具体逻辑
loading.close();
})
.catch(function (err) {
//异常返回,http状态码非200,errMsg
if (typeof failure === 'function') {
failure({code:2,msg: 'error:'+err.response,data:{}});//回调实现具体逻辑
} else {
Vue.prototype.$message.error(err.response);//你不处理错误我来处理错误
}
loading.close()
})
}
}
直接使用
完整用法:
this.network.request('/admin/finance.adjust/select', params, (json) => {
this.net = json.data; //成功获取数据
},(json)=>{
//this.$message.error('我其实不用处理了')
},'post')
最简用法(failure和method用缺省的即可):
this.network.request('/admin/finance.adjust/select', params, (json) => {
this.net = json.data; //成功获取数据
})