vue3封装ajax请求，用async/await发送请求

安装axios

npm install axios

yarn add axios

现在src下创建api目录

request.js

// 导入axios
import axios from 'axios'

const request = axios.create({
	// baseURL 将自动加在 url`前面，除非 url 是一个绝对 URL。
	// 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
	baseURL: "https://www.baidu.com/",  // 请求接口前缀
	// timeout设置一个请求超时时间，如果请求时间超过了timeout，请求将被中断，单位为毫秒（ms）
	timeout: 10000,
	// headers是被发送的自定义请求头，请求头内容需要根据后端要求去设置，这里我们使用本项目请求头。
	headers: {
		'Accept': 'application/json',
		'Content-Type': 'application/json',
		'Access-Control-Allow-Origin': '*'
	}
})

// 请求拦截器
request.interceptors.request.use(
	config => {
		// 在请求发送之前可以做一些处理，比如添加请求头等
		return config;
	},
	error => {
		// 请求错误处理
		return Promise.reject(error);
	}
);

// 响应拦截器
request.interceptors.response.use(
	response => {
		// 在这里，你可以对从后端拿到的数据进行处理
		const res = response.data;
		if (res.code === 400 || res.code === 401 || res.code === 403) {

		} else {
			return Promise.resolve(response);
		}
	},
	error => {
		// 响应错误处理
		if (error.message.indexOf('timeout') != -1) {
			// ElMessage.error('网络超时');
		} else if (error.message == 'Network Error') {
			// ElMessage.error('网络连接错误');
		} else {
			// if (error.response.data) ElMessage.error(error.response.statusText);
			// else ElMessage.error('接口路径找不到');
		}
		return Promise.reject(error);
	}
)

export default ({
	url,
	method = "GET",
	params,
	data
}) => {
	return request({
		url,
		method,
		params,
		data
	});
}

index.js

import request from './request.js'

export function login(data) {
	return request({
		url: 'auth/jwt/token',
		method: 'POST',
		data
	})
}

在组件中使用，async要写在离await最近的函数前缀上

import {login} from '../api/index.js';

const islogin = async(val) => {
    // 解构赋值data
	let {data} = await login({username:"123",password:"123"})
	console.log(data);  //请求返回数据
}

islogin()