1.下载axios
npm i axios
2.新建utils工具目录
3.创建config.js、、request.js、api.js
一、config.js用于配置不同环境下的baseURL（开发环境或者打包环境）
//config.js
export default {
baseUrl: {
dev: '',
pro: ''
}
}
二、request.js用于封装axios方法（配置拦截器、配置公共配置）
//request.js
import axios from "axios"
import config from './config.js'
//判断环境来获取不同的url
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
class axiosRequest {
constructor(baseUrl) {
this.baseUrl = baseUrl
}
getConfig() {//公共基础配置
const config = {
baseURL: this.baseUrl,
header: {}
}
return config
}
interceptor(instance) {//给实例配置拦截器
// 添加请求拦截器
instance.interceptors.request.use(function(config) {
// 在发送请求之前做些什么
return config;
}, function(error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function(response) {
// 对响应数据做点什么
return response;
}, function(error) {
// 对响应错误做点什么
// console.log(error)
return Promise.reject(error);
});
}
request(options) {//新建实例并配置实例并可传参
const instance = axios.create() //新建axios实例
options = {...this.getConfig(),...options} //参数（baseURL、其他参数）
this.interceptor(instance) //给axios实例添加拦截器
return instance(options) //给axios实例添加参数
}
}
export default new axiosRequest(baseUrl) //暴露实例
三、api.js用于存放各个不同的接口请求方法
//api.js
import http from './request.js'
//用于存放各种专门的获取api的函数
//之后哪个组件需要使用axios就直接调用此js文件的方法
export const getData = () => {
return http.request({
url: '/home/getData'
})
}
