uniapp封装接口请求方式，全局调用

一、新建一个js文件作为域名封装的文件

uts.js的代码如下:

const BASE_URL = 'https://xxxxxxxxx'; //接口封装域名

export default({
	YM:'https://xxxxxxxx'  //全局公用域名
})

/**
 * 封装请求函数
 * @param {string} url - 请求的接口地址
 * @param {object} data - 请求的数据
 * @param {string} method - 请求的方法，默认为 GET
 * @returns {Promise} - 返回一个 Promise 对象
 */
export function request(url, data = {}) {
	// 假设你从本地存储或其他位置获取 token
	const token = uni.getStorageSync('token'); // 请根据实际情况获取 token

	return new Promise((resolve, reject) => {
		uni.request({
			url: `${BASE_URL}${url}`,
			method: 'POST',
			header: {
				token: `${token}`
			},
			data: data,
			success: (res) => {
				if (res.statusCode === 200) {
					resolve(res.data);
				} else {
					reject(new Error(`请求失败，状态码：${res.statusCode}`));
				}
			},
			fail: (err) => {
				reject(err);
			}
		});
	});
}


export function uploadImage(uploadUrl) {
    return new Promise((resolve, reject) => {
        // 选择图片
        uni.chooseImage({
            success: (chooseImageRes) => {
                const tempFilePaths = chooseImageRes.tempFilePaths; // 获取选择的图片路径

                // 上传图片
                uni.uploadFile({
                    url: `${BASE_URL}${uploadUrl}`, // 接口地址
                    filePath: tempFilePaths[0], // 选择的第一张图片
                    name: 'file',
                    success: (res) => {
                        let Ima = JSON.parse(res.data); // 解析返回的数据
                        const imageUrl = Ima.data.url; // 提取图片 URL
                        resolve(imageUrl); // 返回上传的图片 URL
                    },
                    fail: (err) => {
                        console.error('上传图片失败:', err); // 处理上传失败的情况
                        reject(err); // 传递错误信息
                    }
                });
            },
            fail: (err) => {
                console.error('选择图片失败:', err); // 处理选择图片失败的情况
                reject(err); // 传递错误信息
            }
        });
    });
}

二、在main.js中全局引入，这样在所有页面都可以直接使用封装的接口请求，不用一一引入了（PS：uploadImage是我封装的上传图片的方法也可以直接使用）

import { request,uploadImage} from 'Api/uts.js'; // 引入封装的请求函数
import uts from 'Api/uts.js'; // 引入封装的请求函数

Vue.prototype.$uts = uts.YM

Vue.prototype.$request = request;
Vue.prototype.$uploadImage = uploadImage;

三、在需要请求接口的页面直接使用即可

this.$request('/api/order/olist', data).then((data) => {
	console.log(data,'接口返回的数据')
})


图片上传

this.$uploadImage('/api/common/upload').then((data) => {
	console.log(data, '上传的图片');
})