axios的封装：不同的人去封装axios都会有一些区别，在这里我就随便谢谢几种不同的疯转方法吧？
安装：npm install axios --save
第一种封装方法
request.js文件
//一些代码平常自己写的是用不到的该删的删吧，遇到问题可以问我哟
import axios from 'axios'
import get from 'lodash/get'//获取状态码
import storage from 'store'//本地存储的一个插件 npm install store --save
//创建axios实例
const request = axios.create({
// API 请求的默认前缀 公共url
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 10000, // 请求超时时间
});
// 异常拦截处理器 设置这个的原因是让你知道http请求哪里出了问题
const errorHandler = (error) =>{
//获取status code
const statue = get(error,'response.status')
switch (status) {
case 400:
error.message = '请求错误';
break;
case 401:
error.message = '未授权，请登录';
break;
case 403:
error.message = '拒绝访问';
break;
case 404:
error.message = `请求地址出错: ${error.response.config.url}`;
break;
case 408:
error.message = '请求超时';
break;
case 500:
error.message = '服务器内部错误';
break;
case 501:
error.message = '服务未实现';
break;
case 502:
error.message = '网关错误';
break;
case 503:
error.message = '服务不可用';
break;
case 504:
error.message = '网关超时';
break;
case 505:
error.message = 'HTTP版本不受支持';
break;
default:
break;
}
return Promise.reject(error)
}
// 请求拦截
request.interceptors.request.use((config)=>{
//一般情况下公司的所有的请求在header中有一个token值，如果是自己写的话就忽略吧
let token = JSON.parse(localStorage.getItem('userInfo')).token//看具体情况获取
if(token){
config.headers.token = token
}
return config
},errorHandler)
// 响应拦截
request.interceptors.response.use((response)=>{
const dataAxios = response.data;
//该状态码是与后端进行约定的，有些公司可能不会考虑到这些，所以可以直接忽略
const { code } = dataAxios;
if(code === underfined){
// 如果没有 code 代表这不是项目后端开发的接口
return dataAxios
}else{
// 有 code 代表这是一个后端接口 可以进行进一步的判断
switch (code) {
case 200:
// [ 示例 ] code === 200 代表没有错误
return dataAxios.data;
case 'xxx':
// [ 示例 ] 其它和后台约定的 code
return 'xxx';
default:
// 不是正确的 code
return '不是正确的code';
}
}
},errorHandler)
export default request
组件中使用
<template>
<div></div>
</template>
<script>
import request from '路径';
export default {
name: 'lcm',
created() {
this.getList();
},
methods: {
async getList() {
let res = await request({
//地址
url: '/b/template/templateList',
//参数
params: {
},
//请求的方式get/post
method: 'post',
});
console.log(res);
},
},
};
</script>
<style scoped></style>
当你的组件中请求方法过多时，你可以在封装一层代码哟，把请求的方法统一放到一个js文件夹中
js文件
import request from '路径'
export function getList(id){
return request({
url:"",
params:{
...id
},
methods:"post"
})
}
使用
<template>
<div></div>
</template>
<script>
import { getList } from '路径';
export default {
name: 'lcm',
created() {
this._getList();
},
methods: {
async _getList() {
let res = await getList({
projectId: 'PJ210910154948870034',
pageNo: 1,
pageSize: 10,
});
console.log(res);
},
},
};
</script>
<style scoped></style>
第二中封装方法
以下图接口返回的结果为例（下面返回的字段与值都是跟后端约定过了的）
import axios from 'axios';
import Vue from 'vue';
import qs from 'qs';
import { Message } from 'element-ui';
let config = {
baseURL: 'http://localhost:8080/api/project',
timeout: 60 * 1000, // Timeout
};
// 创建axios实例
const _axios = axios.create(config);
// 请求拦截
_axios.interceptors.request.use(
(config) => {
// 设置token
// token的值在公司一般有获取方式，自己写的话一般不用去考虑
config.headers.token = '136d930fb0c3c04bc0ac0158de4bac7ec1d';
// 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&arr=2,不转换会显示为arr[]=1&arr[]=2
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' });
};
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 相应拦截
_axios.interceptors.response.use(
(response) => {
// 在这里你可以根据实际情况写相应的操作
if (response.data.retCode != undefined) {
// 接口请求成功 为什么要有个条件method为post呢，因为get请求一般为向服务器请求数据，而post请求一般为
//向服务器发送数据，当用户进行了相关操作后，为了让用户知道他已经操作完成了，我们会给一个弹窗提示
if (
response.status == 200 &&
response.config.method == 'post' &&
!response.data.error &&
response.data.messageStatus != 404
) {
showMessage(response.data.retInfo, 'success');
}
// token失效后 删除token值 并返回登入页
if (response.data.retCode == 5 || response.data.retCode == 10004) {
// removeToken();
Router.push({ path: '/login/userLogin' }); //返回到登录页
}
if (response.data.retCode == 40004) {
showMessage(response.data.retInfo, 'error');
}
if (response.data.error && response.data.retCode != 40004) {
showMessage(response.data.retInfo || '操作失败', 'warning');
}
}
},
(error) => {
if (error.response) {
showMessage(error.response.data.message, 'error');
}
return Promise.reject(error);
}
);
// 封装一个弹窗提示的函数
// 在这里会用到element ui组件库中的消息提示组件
// info为提示的内容，type为提示的类型
function showMessage(info, type) {
if (type == 'warning') {
Message.warning({
message: info,
showClose: true,
});
} else if (type == 'error' || info == '服务异常') {
Message.error({
message: info,
showClose: true,
});
} else if (type == 'success') {
Message.success({
message: info,
showClose: true,
});
}
}
Plugin.install = function(Vue, options) {
Vue.axios = _axios;
window.axios = _axios;
Object.defineProperties(Vue.prototype, {
axios: {
get() {
return _axios;
},
},
$axios: {
get() {
return _axios;
},
},
});
};
Vue.use(Plugin);
export default Plugin;
main.js文件引入
import '路径'
使用
data:{
id:1,
name:'刘三七'
}
//get请求
this.$axios.get('url地址',{
params:{
...data
}
})
//post 请求
//后端要求传body类型的数据
this.$axios.post('',{
...data
})
//后端要求传query类型的数据
this.$axios.post('',null,{
params:{
...data
}
})
//
数据过滤
大家可能会遇到这种情况，后端返回过来的数据往往有一些我们不需要的数据，因此最好对数据做一层过滤是最好的，筛选出我们需要的数据
js文件
export class setList {
constructor(list) {
this.attachmentList = list.attachmentList;
this.docUrl = list.docUrl;
this.durationUnit = list.durationUnit;
this.hospitalId = list.hospitalId;
this.isEnable = list.isEnable;
}
}
使用
<template>
<div></div>
</template>
<script>
import { getList } from '../util/lcm';
import { setList } from '../util/lcm2';
export default {
name: 'lcm',
created() {
this._getList();
},
methods: {
async _getList() {
let res = await getList({
projectId: 'PJ210910154948870034',
pageNo: 1,
pageSize: 10,
});
// res.data.retData.list; 数组
this._setList(res.data.retData.list);
},
_setList(e) {
let arr = [];//这是对于数组类型的数据的处理方法
e.forEach((item) => {
arr.push(new setList(item));
});
console.log(arr);
},
},
};
</script>
<style scoped></style>
//还有一种其实与上面的差不多
js文件
export class setList {
constructor({ attachmentList, docUrl, durationUnit, hospitalId, isEnable }) {
this.attachmentList = attachmentList;
this.docUrl = docUrl;
this.durationUnit = durationUnit;
this.hospitalId = hospitalId;
this.isEnable = isEnable;
}
}
export function setLists(item) {
return new setList({
attachmentList: item.attachmentList,
docUrl: item.docUrl,
durationUnit: item.durationUnit,
hospitalId: item.hospitalId,
isEnable: item.isEnable,
});
}
使用
<template>
<div></div>
</template>
<script>
import { getList } from '../util/lcm';
import { setLists } from '../util/lcm2';
export default {
name: 'lcm',
created() {
this._getList();
},
methods: {
async _getList() {
let res = await getList({
projectId: 'PJ210910154948870034',
pageNo: 1,
pageSize: 10,
});
let arr = [];
res.data.retData.list.forEach((item) => {
arr.push(setLists(item));
});
console.log(arr);
},
},
};
</script>
<style scoped></style>
结束语
这两种封装的方法都特别好用，我想如果你有时间的话把这两种方法结合一下效果可能会更好
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
