小程序中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調用次數比較多的小程序。大家在開發小程序的時候，也可以嘗試將常用的方法進行封裝，避免重複代碼，提高代碼的復用性和可維護性。