#
  1. 封装 http 的 api 请求，也就是封装 wx.request() 函数
  2. wx.request() 这类的小程序函数，都是异步函数，在调用传值的时候需要使用回调函数，调用次数多起来，会出现回调地狱现象
    接收处理异步函数调用的返回值，通常有三种途径：
    1. 通过 callback 回调函数处理（微信小程序本地开发和云开发都支持）
    2. 通过 promise 对象处理（微信小程序本地开发不支持，云开发不写 success 参数即可自动返回 promise 对象）
    3. 通过 await 和 async 处理（微信小程序本地开发不支持）

解决方案（学习后，我自己比较喜欢的一个方案）#

  1. 通过工具类，编写一个代理函数，将 wx.request() 这类的异步函数编程返回 Promise 对象
  2. 当调用这些代理函数处理过的异步函数时，使用 await 和 async 处理，并直接收到返回的值

假设请求的 api 地址和得到的数据格式#

URL 地址：www.example.com/user/by/id?id=1
数据格式：(假设返回的是一个对象中存放着数组)

{
    data: [
    {
        id: 1
        name: Eric
    }
    ]
}Copy

每个步骤大致要实现的目的（以封装 api 请求为例）#

  1. 微信开发者工具，开启 ES6转ES5 和 增强编译
    • Promise 对象是 es6 语法，需要通过 ES6转ES5 处理
    • await 和 async 是 es7 的语法，需要通过增强编译处理
  2. 创建 /config/config.js 文件，记录 api 请求的常用参数
  3. 创建 /utils/util.js 文件，编写代理函数
    • 其他文件使用小程序异步函数传值的时候，调用该代理函数
    • 使异步函数可以返回 Promise 对象
  4. 创建 /utils/http.js 文件，编写封装 wx.request 函数
    • 在此文件中，使用 /utils/util.js 中的代理函数对 wx.request 处理
    • 通过 await 和 async 的使用并 return 的数据
  5. 创建 /model/user.js 文件中，处理 api 请求以及业务逻辑处理
    • 在此文件中，使用 /utils/http.js 处理 api 请求并 return 数据
    • 如果需要额外的业务逻辑，也需要在此完成
  6. 在 pages/user/ 文件夹中，完成数据绑定和数据展示

具体步骤案例（以封装 api 请求为例）#

  1. 创建 /config/config.js 文件，记录 api 请求的常用参数 
    // 将公用的部分常用参数放入配置文件中
const config = {
 apiBaseUrl: 'http://www.example.com'
}
export {
 config
}Copy
  2. 创建 /utils/util.js 文件，编写代理函数
    来自：Lin-UI 函数库
    /**
*  封装异步函数，使其返回Promise对象
*  以便使用 await 和 async 调用异步函数
*/
const promisic = function (func) {
return function (params = {}) {
 return new Promise((resolve, reject) => {
   const args = Object.assign(params, {
     success: (res) => {
       resolve(res);
     },
     fail: (error) => {
       reject(error);
     }
   });
       func(args);
   });
 };
};
// 导出 promisic
export {
 promisic
}Copy
  3. 创建 /utils/http.js 文件，编写封装 wx.request 函数 
     import { config } from "../config/config";    // 获取api基本信息
 import { promisic } from "./util";    // 通过代理函数处理异步函数 wx.request
 class Http {
     // 通过代理函数处理，返回的是Promis对象，需要使用await和async处理
     static async request({url, data, method='GET'}) {
         const res = await promisic(wx.request)({
           url: `${config.apiBaseUrl}${url}`,
           data,
           method
         });
         // 想要的数据是案例数据中的数组，不是对象，所以需要在此得到对象中的数组并返回
         return res.data;
       }
     }
     // 导出封装的 Http 请求类
     export {
       Http
     }Copy
  4. 创建 /model/user.js 文件中，处理 api 请求以及业务逻辑处理 
    import { Http } from "../utils/http";
class User {
 static async getUserById() {
     // 使用封装好的http请求，并将其数据结果返回
     return await Http.request({
         url: `/user/by/id`,
         data: {
             id: 1
         }
     });
 }
}
export {
 User
}Copy
  5. 在 pages/user/user.js 文件夹，完成数据绑定 
    import { User } from "../../model/user";
Page({
 /**
 * 页面的初始数据
 */
 data: {
     user: null
 },
 /**
 * 监听页面加载
 */
 onLoad: async function (options) {
     const data = await User.getUserById();
     // 数组0是想要的具体数据
     this.setData({
         user: data[0]
     });
 }
})Copy
  6. 在 pages/user/user.wxml 文件中，完成数据展示 
    <view>
 {{user.name}}
</view>Copy

补充记录#

  • /utils/util.js 中的 promisic 函数，也可以使用在其他异步函数上来直接收到返回数据
  • 微信小程序目前版本的语法，仍然是以 es5 为主，所以 es6 的 promise 对象和 es7 的 await、async 都无法直接使用，需要通过配置开发者工具和特殊编写的工具类实现
  • 在后续 api 请求中，除有特殊需求外，只需要从 步骤4 开始进行业务处理即可，前几步中的配置已经完成