Vite-Vue/Vite-Vue-tutorial/src/utils/request.js

import axios from "axios";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

export const serverUrl = "http://localhost:1337";

const instance = axios.create({
	baseURL: serverUrl, // baseURL会在发送请求的时候拼接在url参数的前面
	timeout: 5000, // 设置超时时间
});

/**
 * get 请求
 * @param {*} url 请求地址
 * @param {*} params url中传递的数据,拼接在url后面
 * @returns
 */
// axios.get(url, config)请求第二个参数表示配置信息(包括请求数据、请求头等)
export const get = (url, params) =>
	instance.get(url, {
		params: params, // url传递的参数
	});

/**
 * post 请求
 * @param {*} url 请求地址
 * @param {*} data 数据
 * @returns
 */
// axios.post(url, data, config)请求第三个参数表示配置信息(包括请求数据、请求头等)
export const post = (url, data) => instance.post(url, data);

/**
 * put 请求
 * @param {*} url 请求地址
 * @param {*} data 数据
 * @returns
 */
export const put = (url, data) => instance.put(url, data);

/**
 * delete 请求
 * @param {*} url 请求地址
 * @returns
 */
export const del = (url) => instance.delete(url);

// Add a request interceptor (全局请求拦截)
instance.interceptors.request.use(
	function (config) {
		// console.group("全局请求拦截");
		// console.log(config);
		// console.groupEnd();
		NProgress.start(); // 启动进度条
		// 这里还可以设置token
		return config;
	},
	function (error) {
		return Promise.reject(error);
	}
);

// Add a response interceptor (全局响应拦截)
instance.interceptors.response.use(
	function (response) {
		// console.group("全局响应拦截");
		// console.log(response);
		// console.groupEnd();
		NProgress.done(); // 关闭进度条
		return response.data;
	},
	function (error) {
		NProgress.done(); // 关闭进度条
		return Promise.reject(error);
	}
);