uni.request请求的封装

最新推荐文章于 2025-06-16 11:36:43 发布

原创最新推荐文章于 2025-06-16 11:36:43 发布 · 6.4k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #uni-app

本文介绍了如何在uni-app中进行网络请求的封装，通过在static/js/request.js中创建一个Promise封装的uni.request方法，并在getData.js文件中集中管理所有前端请求接口，如login和register等。这种方式使得页面调用接口更加便捷和统一。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni.request请求的封装

（一）static文件夹下创建js文件夹，再创建request.js文件，用于封装请求，使用promise封装

let baseUrl = ''; //域名或选取所有接口不变的那一部分
export const request = (options = {}) => {
	//异步封装接口，使用Promise处理异步请求
	return new Promise((resolve, reject) => {
		// 发送请求
		uni.request({
			url: baseUrl + options.url || '', //接收请求的API
			method: options.method || 'GET', //接收请求的方式,如果不传默认为GET
			data: options.data || {}, //接收请求的data,不传默认为空
		}).then(data => {
			let [err, res] = data;
			resolve(res);
		}).catch(error => {
			reject(error);
		})
	})
}

（二）同样在js文件夹下创建getData.js文件，将前端所有的请求都写在一起

import { request } from './request.js'; //导入封装好的js文件

//每一个请求的接口都返回一个函数，便于直接调用

//请求登录的接口
export const login = (data)=>{
	return request({
		url:'', //后端对应的接口,如果前端配置了跨域，这里直接写http://xx:xx后面的内容
		method:'',//请求的方式，get,post等
		data:data //请求所带的参数
	})
}

//请求注册的接口
export const register = (data)=>{
    return axios.request({
        url:"", 
        method:'post', 
        data:data, 
    })
}
...

（三）页面调用，哪个页面想使用，就在哪个页面中引入getData.js文件

import { login } from '../../static/js/getData.js';

async xx(){
    await login();
}

完