前言：
封装axios的目的是为了方便项目对接口统一管理，所有调用接口都写在一个文件里。
项目结构
按照国际惯例，先贴目录结构图（以一个vue项目为例，对内部的接口进行封装）
img.jpg
代码部分
- src目录下新建axios/index.js
import axios from "axios";
import qs from "qs"; //data序列化
const instance = axios.create({
withCredentials: true //跨域是否携带凭证
});
//请求拦截器
instance.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error);
}
);
//响应拦截器
instance.interceptors.response.use(
response => {
return Promise.resolve(response.data); //这里返回的是data，并不是全部response
},
error => {
return Promise.reject(error);
}
);
基本的axios封装就完成了，包括请求拦截、响应拦截，可以根据项目实际情况进行变更
- 调用封装好的instance，所有调用接口都写在这里
在axios/index.js继续写入
...
//例如
export default {
/** 城市列表
* params以Query String拼接到url
*/
cityList: params => {
return instance.get("/city/list", {
params: params
});
},
/** 用户信息
* data以json传输
*/
userInfo: data => {
return instance.post("/user/info", data);
},
/** 订单列表
* data以Form Data传输
*/
orderList: data => {
return instance.post("/order/list", qs.stringify(data));
},
}
外部调用
例如在某个vue文件里：
<script>
import axios from "../../axios";
export default {
mounted() {
axios.cityList({ id: 1 }).then(response => {
// response（接口返回数据）
});
axios.userInfo({ id: 1 }).then(response => {
// response（接口返回数据）
});
axios.orderList({ id: 1 }).then(response => {
// response（接口返回数据）
});
}
};
</script>
<template></template>
<style scoped></style>
完。
