vue3实战-axios请求封装（get、post、put、delete）

1、在src目录下创建http文件夹，在http文件夹下分别创建index.js、request.js、api.js

2、index.js的作用：用于导出api.js定义的所有接口，代码如下

export * from './api';

3、request.js代码如下：

import axios from 'axios';
import buildURL from 'axios/lib/helpers/buildURL';
import { merge } from 'axios/lib/utils';

//判断指定参数是否是一个纯粹的对象，所谓"纯粹的对象"，就是该对象是通过"{}"或"new Object"创建的
function isPlainObject (val) {
  	return val && val.constructor.name === 'Object'
}

//请求之前进行拦截，可做的操作：1、添加loading的加载；2、添加请求头；3、判断表单提交还是json提交
let requestInterceptors = [
	config => {
		//添加loading的加载
		
		//添加请求头
		config.headers.authorization = sessionStorage.getItem('Token');
		//判断表单提交还是json提交
		if (config.emulateJSON && isPlainObject(config.data)) {
			config.data = buildURL('', config.data).substr(1);
		}
		return config;
	}
]

//请求响应之后进行拦截，可做操作：1、取消loading的加载；2、对返回状态进行判断：如请求错误、请求超时、获取数据失败、暂无数据等等
let responseInterceptors = [
	res => {
		//取消loading加载
		
		//对返回状态进行判断：如请求错误、请求超时、获取数据失败等等

		//返回结果
		return Promise.resolve(res);
	},
	err => {
		//取消loading加载
		
		//对返回状态进行判断：如请求错误、请求超时、获取数据失败等等

		//返回结果
		return Promise.reject(err);
	}
]

//组装请求
let serviceCreate = config => {
	let service = axios.create(merge({}, config));
	service.interceptors.request.use(...requestInterceptors);
	service.interceptors.response.use(...responseInterceptors);
	return service
}
serviceCreate();
export { serviceCreate, merge };

4、api.js代码如下：

import { serviceCreate, merge } from '@/http/request';

//这种方式可以采用单个项目的接口，也可以使用多个项目的接口，看自己的项目情况而定
let http0 = serviceCreate({
    baseURL: '/project1/api1',
    timeout: 15000,//请求超时
    emulateJSON: true,//默认表单提交
})
let http1 = serviceCreate({
    baseURL: '/project2/api2',
    timeout: 15000,//请求超时
    emulateJSON: true,//默认表单提交
})

//get请求示例
export function getData(params, config) {
    return http0.get('/project/list', merge(config, { params }));
}
//delete请求示例
export function deleteData(params, config) {
    return http0.delete('/project/list', merge(config,{ params }));
}
//post请求示例（表单提交）
export function postDataFrom(params, config) {
    return http0.post('/project/list', params, config);
}
//post请求示例（json提交）
export function postDataJson(params, config) {
    return http0.post('/project/list', params, merge(config, { emulateJSON: false }));
}
//put请求示例（表单提交）
export function putDataFrom(params, config) {
    return http0.put('/project/list', params, config);
}
//put请求示例（json提交）
export function putDataJson(params, config) {
    return http0.put('/project/list', params, merge(config, { emulateJSON: false }));
}

5、页面中调用

import { getData, deleteData, postDataFrom, postDataJson, putDataFrom, putDataJson } from "@/http";

getData({ name: "我是参数" }).then(res => { console.log("返回数据", res) })
deleteData({ name: "我是参数" }).then(res => { console.log("返回数据", res) })
postDataFrom({ name: "我是参数" }).then(res => { console.log("返回数据", res) })
postDataJson({ name: "我是参数" }).then(res => { console.log("返回数据", res) })
putDataFrom({ name: "我是参数" }).then(res => { console.log("返回数据", res) })
putDataJson ({ name: "我是参数" }).then(res => { console.log("返回数据", res) })