1.辅助工具层---utils
//在utils文件夹下面建立request.js文件
//引入axios库
import axios from 'axios';
//配置请求的基准URL地址
axios.defaults.baseURL = 'http://sell.h5.itsource.cn:8087';
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
// 在发送请求之前做些什么
return config;
}, function(error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function(error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
export default axios;
我们可以在请求拦截中配置token;在响应拦截中对消息进行统一管理
2.接口层---api
//在api文件夹中封装每个组件的接口 (xx.js)
import request from '@/utils/request.js'
// get的请求方式
export const reqxxx = (params) => {
return request({
method: 'get',
url: 'xxx',
params
})
};
// post的请求方式
export const reqxxxx = (data) => {
return request({
method: 'post',
url: 'xxx',
data
})
};
3.应用层---各个组件中使用
//在对应的组件中引入使用api接口的封装函数
import {reqxxx} from "@/api/xx.js";
//具体使用 async和await搭配使用
created() {
this.getData();
},
methods: {
// 获取列表
async getData() {
let res = await reqxxx(data);
},
data为对象是接口文档所需要发送数据,res为响应数据是后台返回来的数据