1.在 src 目录下新建 request 文件夹,并新建 request.js/index.js 文件
request.js/index.js 文件中的代码如下:
// 引入axios
import axios from "axios";
// 创建axios实例
const serve = axios.create({
baseURL: "xxx",
timeout: 10000,
});
// 添加请求拦截器
serve.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
serve.interceptors.response.use(
function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
},
function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
}
);
// 导出
export default serve;
2.在 src 目录下新建 api 文件夹,并新建 api.js 文件
api.js 文件中的代码如下:
// 引入request文件
import request from "@/request/request";
const getListAPI = (params) => {
return request({
// 传递过来的参数
...params,
});
};
export default getListAPI;
利用 ES6 的扩展运算符(对象展开符) … 接收传递过来的参数
3.在组件中使用
代码如下:
<script>
import getListAPI from "@/api/xxxApi";
export default {
name: "MyHome",
data() {
return {
list: [],
};
},
created() {
this.getList();
},
methods: {
async getList() {
const { data: res } = await getListAPI({
method:'GET',
url: "/xxx",
params: {
// 具体参数
},
});
this.list = res;
},
},
};
</script>