vue axios封装 类方法

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'
	})
}