wx.request请求封装（微信小程序/uni-app）

一时失言乱红尘 2021-11-22 03:58 484阅读 0赞

距离做完项目很久了，腾出点时间，记录下。为了提高效率与可维护性，对其进行了一个简单的封装~

**一、目录结构**

![20190726145723845.png][]

**二、三步骤**

**1、第一层封装（config.js）**

分别针对get与post进行一个公共wx.request请求的封装；**每个方法传了2个参数,url与data;**

**url:接口地址,  
data:请求的参数,**

const commonUrl ="https://ceshi.com/up/"  //公共路径
    
    // post请求封装
    function postRequest(url, data) {
    	var promise = new Promise((resolve, reject) => {
    		var that = this;
    		var postData = data;
    		uni.request({
    			url: commonUrl + url,
    			data: postData,
    			method: 'POST',
    			header: {
    				'content-type': 'application/x-www-form-urlencoded',
    				'token': uni.getStorageSync("token")
    			},
    			success: function(res) {
    				// 此处的code=0，只是个举例，有的可能是1等其他的，具体的看后台决定；
                    //res.data.data也根据自己的后台返回层级决定，
                    //有的可能是res.data.data.data等其他形式。
                    //返回什么就相应的做调整
    				if (res.statusCode == 200 && res.data.code == 0) {
    					resolve(res.data.data);
    				} else {
    					// 请求服务器成功，但是由于服务器没有数据返回，
                         //此时无code。会导致这个空数据 
                        
    					// 不下去，导致报错，所以还是要resolve下，这样起码有个返回值，
                        //不会被阻断在那里执行不下去！
    					resolve(res.data.data);
    				}
    			},
    			error: function(e) {
    				reject('网络出错');
    			}
    		})
    	});
    	return promise;
    }
    
    // get请求封装
    function getRequest(url, data) {
    	var promise = new Promise((resolve, reject) => {
    		var that = this;
    		var postData = data;
    		uni.request({
    			url: commonUrl + url,
    			data: postData,
    			method: 'GET',
    			header: {
    				'content-type': 'application/json'
    			},
    			success: function(res) {
    				if (res.statusCode == 200 && res.data.code == 0) {
    					resolve(res.data.data);
    				} else {
    						resolve(res.data.data);
    				}
    			},
    			error: function(e) {
    				reject('网络出错');
    			}
    		})
    	});
    	return promise;
    }
    
    
    module.exports = {
    	postRequest,
    	getRequest
    }

**2、第二层封装(http.js)**

在http.js文件中进行第二层封装，即进行每个具体功能接口的请求封装；

**这一层传请求的接口地址url**

var config = require('./config.js')
    
    // 文章请求列表
    var getArticleList = function(e){
    	return config.getRequest("article/list",e);
    }
    
    
    module.exports = {
        getArticleList
    }

**3、调用、传参（index.js）**

在index.js中调用http.js中的接口;

**这一层传请求的参数data**

<template>
    	<view>每日一读</view>
    </template>
    
    <script>
    	import http from '../../utils/http.js';
    	export default{
    		onLoad() {
    			http.getArticleList().then(list=>{
    				console.log(list)
    				// 此处的list就是config.js中，wx.request封装中resolve的值，
                    //即list===res.data.data的值；
    			})
    			
    			// 如果需要向服务器传值，可以这样写
    			http.getArticleList({
    				open:"value"
    			}).then(list=>{
    				console.log(list)
    			})
    			
    		}
    	}
    </script>

封装形式多种多样，这里只是其中一种，比如有的封装了一层，调用的时候url与参数data一起传，但不建议这样，后续修改的话要去每个页面改。虽然地址不会经常改，但还是建议最好进行二层封装，把地址放在同一个文件好管理，仅供参考~

小程序与uni.app封装一样，一个wx.request，一个uni.request而已。

[20190726145723845.png]: /images/20211122/d1a2865b0b32493988cde08e3a8ae0bd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，484人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序封装请求(参考内容)

新建文件夹request,新建request.js文件 //同时发送异步代码的次数 let ajaxTimes = 0; //使用pr

秒速五厘米/ 2023年01月16日 02:44/ 0 赞/ 202 阅读

相关微信小程序request请求封装

/ 请求头 / const header = { 'content-type': 'application/x-www-form-urlenco

心已赠人/ 2022年10月18日 12:55/ 0 赞/ 237 阅读

相关微信小程序封装request请求

我的个人刷Java面试题网站:[http://www.study-java.cn/][http_www.study-java.cn] 在小程序开发中，通过接口获取后台数据，这

浅浅的花香味﹌/ 2022年05月31日 04:15/ 0 赞/ 328 阅读

相关微信小程序HTTP接口请求封装

最近在学习小程序的编写，需要调用后端接口，经常要用到wx.request方法，所以就自己封装了一下，简化一下代码，如果能给大家提供帮助更好，我的项目后端是使用的Java SSM

ゝ一世哀愁。/ 2022年05月23日 23:51/ 0 赞/ 279 阅读

相关微信小程序 -wx.request请求封装

配置文件新建配置文件 config/index.js export default { / @description 连接

朴灿烈づ我的快乐病毒、/ 2021年09月29日 04:08/ 0 赞/ 439 阅读

相关 uniapp网络请求封装；小程序请求接口封装；uni.request接口封装

[另一篇全面封装文章][Link 1] [资源文章下载地址][Link 2] 1.正常使用uni.request()发送请求(未封装) get() {

淩亂°似流年/ 2021年09月07日 06:19/ 0 赞/ 1560 阅读

相关封装微信小程序的数据请求

网络请求小程序提供了wx.request，仔细看一下 api，这不就是n年前的 $.ajax 吗，好古老啊。 // 官方例子 wx.request({

小鱼儿/ 2021年07月27日 02:41/ 0 赞/ 454 阅读

相关微信小程序HTTP封装请求

http.js import utils from "../../utils/utils" var http = utils.http; const

柔光的暖阳◎/ 2021年07月25日 02:59/ 0 赞/ 492 阅读

相关微信小程序 promise封装网络请求

//es6的默认值写法 export default function(url,data={ },method='GET') { retu

ゝ一世哀愁。/ 2021年07月25日 01:20/ 0 赞/ 490 阅读

相关微信小程序request请求封装

![20191114194037724.png][] util.js // let baseUrl = 'http:///'; //测试 // let ba

爱被打了一巴掌/ 2021年07月24日 23:16/ 0 赞/ 541 阅读