您的位置:

小程序中wx.request的封装

自从微信小程序推出后,越来越多的企业和个人选择使用微信小程序进行开发,海量的小程序开发者们在使用 wx.request() 方法时可能会发现,经常需要书写重复的代码,效率不够高,不便于维护。今天我们就来讲解一下如何封装 wx.request() 方法,提高代码效率。

一、封装wx.request()的目的

在小程序中使用wx.request() 发送 HTTP 请求是非常常见的操作。当我们在发送请求时,有很多参数我们是不需要每次都写的,例如:请求方式、请求类型、请求地址等。所以我们编写一些基础代码,封装好wx.request(),代码更加简洁,易于维护。

二、wx.request()封装实现

首先,我们先创建一个api.js文件,用来存放所有接口地址。这样,如果我们更换了服务器地址,或是修改了api接口,只需要在这个文件中修改即可。

    
        // api.js

        var API_BASE_URL = "https://www.example.com";
        
        var api = {
            loginUrl: `${API_BASE_URL}/user/login`, // 登录接口
            userInfoUrl: `${API_BASE_URL}/user/userInfo` // 用户信息接口
        };
        
        module.exports = api;
    

接下来,我们来封装 wx.request() 方法。使用Promise语法,让请求更为简单明了。

    
        function request(url, method, data, header = {}) {
            return new Promise((resolve, reject) => {
                wx.showLoading({
                    title: '加载中...'
                });
                wx.request({
                    url: url,
                    method: method,
                    data: data,
                    header: header,
                    success: function(res) {
                        wx.hideLoading();
                        resolve(res.data);
                    },
                    fail: function(err) {
                        wx.hideLoading();
                        reject(err);
                    }
                });
            });
        }
        
        module.exports = {
            request: request
        };
    

封装好的代码非常简单。我们使用一个Promise语法,返回一个promise对象。它接收四个参数:URL、方法、数据、头部。在发送前,我们使用wx.showLoading()显示加载动画;在请求成功或失败,我们都使用wx.hideLoading()关闭加载动画;在成功时,通过resolve,将请求数据返回;在失败时,通过reject返回错误信息。

三、使用方法

我们来演示一下如何使用我们封装好的wx.request()。首先,在导入api.js和request.js之后,可以直接调用 request()方法,如下所示:

    
        const api = require('./api.js');
        const request = require('./request.js');
        
        request.request(api.loginUrl, 'POST', { username: 'admin', password: 'admin' })
            .then(function(response) {
                console.log(response);
            })
            .catch(function(error) {
                console.log(error);
            });
    

相信大家已经看懂了如何使用封装好的request()方法了。对比之前的写法,我们将很多代码集中在了一起。现在,只要使用request()方法调用接口,就能优雅地发起请求,代码也更易于维护。

四、总结

本篇文章中,我们介绍了如何封装 wx.request() 方法,提高了发送HTTP请求的效率。而且这种做法非常适用于对于API调用次数比较多的小程序。大家在开发小程序的时候,也可以尝试将常用的方法进行封装,避免重复代码,提高代码的复用性和可维护性。