UNI-APP 请求封装API集中管理

让GPT封装了一个网络请求

// api.js

import {
	sendRequest
} from './request.js';

export const getHome = () => sendRequest('/computer/home', 'GET');;

export const post = (userData) => sendRequest('/computer/hello', 'POST', userData);

拦截器获取用户的code在header中发送给服务端，如果服务端拿到了openid给客户端返回数据

// request.js
const sendRequest = (url, method, data) => {
	
	const base_url = 'http://192.168.1.4:810/api' + url;
	
	return new Promise((resolve, reject) => {
		// 拦截器 - 请求之前
		beforeRequestInterceptor(base_url, method, data, resolve, reject);
	});
};

// 拦截器 - 请求之前
const beforeRequestInterceptor = (base_url, method, data, resolve, reject) => {
	// 获取小程序用户的code
	uni.login({
		success: (res) => {
			const code = res.code;

			if (code) {
				// 根据需要处理code，比如保存到本地存储或发送到后端验证

				// 执行请求
				executeRequest(base_url, method, data, code, resolve, reject);
			} else {
				// 获取code失败，不执行请求
				reject(new Error('Failed to get code.'));
			}
		},
		fail: (err) => {
			// 获取code失败，不执行请求
			reject(err);
		},
	});
};

// 执行请求
const executeRequest = (base_url, method, data, code, resolve, reject) => {
	uni.request({
		url: base_url,
		method: method,
		data: data,
		header: {
			'Content-Type': 'application/json',
			'Code': code,
		},
		success: (res) => {
			// 拦截器 - 请求成功后
			afterRequestSuccessInterceptor(res.data);

			resolve(res.data);
		},
		fail: (err) => {
			// 拦截器 - 请求失败后
			afterRequestFailureInterceptor(err);

			reject(err);
		},
	});
};

// 拦截器 - 请求成功后
const afterRequestSuccessInterceptor = (data) => {
	// 在这里执行请求成功后的操作，比如处理返回的数据等
};

// 拦截器 - 请求失败后
const afterRequestFailureInterceptor = (error) => {
	// 在这里执行请求失败后的操作，比如处理错误信息等
};

export {
	sendRequest
};

Main.Js中注册

import * as api from '@/common/api/api.js';


Vue.prototype.$api = api;

使用

//Get请求
this.$api.getHome().then((data) => {
    console.log(data); // 请求成功时的处理逻辑
}).catch((error) => {
    console.error(error); // 请求失败时的处理逻辑
});

//Post请求

const userData = {
    name: 'John',
    age: 30,
    id:1,
};
			
self.$api.post(userData).then((data) => {
    console.log(data); // 请求成功时的处理逻辑
}).catch((error) => {
    console.error(error); // 请求失败时的处理逻辑
});