微信小程序promise封装网络请求（wx.request）_微信小程序封装request异步回调

微信小程序给我们封装了wx.request用于请求网络接口数据，通常的形式是

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

url是请求的接口地址，data是需要发送的数据，header是请求头，success是成功回调函数，method是请求类型...

里面还有很多的参数具体代表什么意思需要自己去微信的官方文档下看，但通常使用的就是这些。如果我们需要使用很多接口请求数据，每次都写一遍，会造成大量的代码冗余，我们可以将wx.request进行二次封装来实现调用。

我们用Promise实现异步回调。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

wx.request返回形式是

success (res) {
    console.log(res.data)
  }
fail(e){
...
}

我们使用promise可以将这种形式封装为

​request.GET().then(res=>{
       console.log(res);  
    }).catch(e=>{
 
    })
 
​

只封装最常用的GET和POST请求

function POST(baseAPI,url, params) {
  //加载loading
  wx.showLoading({
      title: '加载中...',
      mask: true
  })
  let promise = new Promise(function (resolve, reject) {
      wx.request({
          url: baseAPI + url,
          data: params,
          header: {
              "Content-Type": "application/x-www-form-urlencoded",
          },
          method: 'POST',
          success: (res) => {
              //接收返回的值
              resolve(res)
          },
          fail: (res) => {
              //拒绝返回的值
              reject(res)
          },
          complete: () => {
              //不管回调是否成功都做一个隐藏
              wx.hideLoading()
          }
      })
  });
  return promise;
}
 
function GET(baseAPI,url, params) {
  let promise = new Promise(function (resolve, reject) {
      wx.request({
          url: baseAPI + url,
          data: params,
          header: {
              "Content-Type": "application/x-www-form-urlencoded",
          },
          method: 'GET',
          success: (res) => {
              resolve(res)
          },
          fail: (res) => {
              reject(res)
          }
      })
  });
  return promise
}
module.exports = {
    POST: POST,
    GET: GET,
}

封装好的函数如何使用：

首先在你需要发送网络请求的页面引入封装好的js文件

const request = require('../../utils/promise.js');

然后在需要的地方使用

let BaseAPI = 'https://m.maoyan.com';
    let data = {
      
    }
    request.GET(BaseAPI,'',data).then(res=>{
       console.log(res.data.coming);
      
    })

原文链接：https://blog.csdn.net/m0_61084402/article/details/124196665

一、封装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调用次数比较多的小程序。大家在开发小程序的时候，也可以尝试将常用的方法进行封装，避免重复代码，提高代码的复用性和可维护性。

小程序中wx.request的封装_笔记大全_设计学院