微信小程序学习总结02:封装api请求(处理异步api回调地狱的一种方案)

想要解决的问题

  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
    }
    ]
}

每个步骤大致要实现的目的(以封装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
    }
  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
    }
  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
         }
  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
    }
  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]
         });
     }
    })
  6. pages/user/user.wxml 文件中,完成数据展示
    <view>
     {{user.name}}
    </view>

补充记录

  • /utils/util.js 中的 promisic 函数,也可以使用在其他异步函数上来直接收到返回数据
  • 微信小程序目前版本的语法,仍然是以es5为主,所以es6的promise对象和es7的await、async都无法直接使用,需要通过配置开发者工具和特殊编写的工具类实现
  • 在后续api请求中,除有特殊需求外,只需要从 步骤4 开始进行业务处理即可,前几步中的配置已经完成
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!