axios的封装

在src目录下新建文件夹utils工具类，文件夹里面新建http.js文件，如果项目涉及到多个基地址可以新建http2.js文件。

import axios from 'axios';/*** 后端*/// 创建axios实例
const http = axios.create({// 1.接口基地址baseURL: 'http://192.168.2.200:8080',// 2.接口超时时间timeout: 5000,
});// 3.axios请求拦截器
http.interceptors.request.use((config) => {return config;},(e) => Promise.reject(e)
);// 4.axios响应式拦截器
http.interceptors.response.use(// 响应数据已经去掉了外层的 data 包装(res) => res.data,(e) => {return Promise.reject(e);}
);export default http;

然后我们对应的接口就可以写在src目录下的apis文件夹里面，例如我们新建一个layout.js文件

import http from '@/utils/http';/*** 页面获取接口*/// 获取数据
export function getDataAPI(params) {return http({url: 'getData',params,});
}// 更改数据
export function setDataAPI(data) {return http({method: 'post',url: 'setData',data,});
}

然后我们在使用的时候就只用进行导入，就可以简单的使用封装过后的接口了。

import { getDataAPI } from '@/apis/layout';// ......// 使用const res = await getDataAPI({type: '铺缆',});console.log('数据:', res );