1、搭建好vue框架,引入axios
2、until文件下创建request.js
baseURL 配置有时候会产生跨域问题,直接在根目录下的vue.config.js中配置代理可以解决
import axios from 'axios'
// 创建axios
const service = axios.create({
baseURL: '你的请求前缀/api'
});
// 添加请求拦截器
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log('res',response);
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default service;
3、新建api.js文件 笔者这里在until文件下创建这个文件
import service from "../until/request"
// 获取seller
export function getSeller(){
return service.request({
method:'get',
url:'/seller',
})
}
4、调用
笔者没有将api挂载到vue全局文件上 因为每个都是单独导出,在单个组件中直接按需导入组件
...
import {getSeller} from '../until/api'
...
async getData(){
const {data:res} = await getSeller()
this.allData = res
// 数据从小到大排序
this.allData.sort((a,b)=>{
return a.value - b.value
})
},