微信小程序 10 封装功能函数库

10.1 封装功能函数库

---

首先我们要知道，wx.request() 是一个 异步请求，即 ajax。如果你想把它 进行一个封装，那么 就要 解决 异步请求拿不到 指定数据和值的问题。

export：向外暴漏 方法 或 属性。

export default：向外暴漏方法和属性，导入的时候 可以 指定任意名字。

1. 直接 return 返回 肯定 拿不到。

// wx.request 是一个 异步请求（底层原理是 ajax）
/*
1. 封装功能函数
    1. 功能点明确
    2. 函数内部应该保留固定的代码（静态的）
    3. 将动态的数据抽取成参数，由使用者根据自身的情况动态的传入
    4. 一个良好的功能函数应该设置形参的默认值（ES6的形参默认值）

2. 封装功能组件
    1. 功能点明确
    2. 组件内部保留静态的代码
    3. 将动态的数据抽取成 props 参数，由使用者根据自身的情况以标签属性的形式传入props 数据
    4. 一个良好的组件应该设置组件的必要性及数据类型
*/

export default (url,data = {type:2},method = "GET") => {
    let result;
    wx.request({
        url,// url:url 可以简写为 url
        data,
        method,
        success:(res) => {
            result = res;
        },
        fail:(err) => {
            result = err;
        }
    });
    return result;
}

import request from "../../utils/request"; 导入这个 写好的 功能函数模块库。

肯定是 拿不到 这个 数据的，因为 wx.request() 是一个 异步请求。也就是 不跟你同步，那人家可能还没执行完呢，没拿到这个数据呢，你就 result = request() 了。。肯定拿不到呀。

2. 利用 ES6 新特性 Promise 解决异步请求 拿不到或返回不了数据的问题。

promise是一个对象，从它可以获取异步操作的消息有：all、race、reject、resolve 这几个方法，原型上有then、catch等方法。

• Promise 对象的状态不受外界影响。Promise对象获取的是异步操作，有三种状态：pending(进行中)、fulfilled(已成功)、reject(已失败)。除了异步操作的结果，其他操作都无法改变这个状态。

当你new 了一个 Promise 对象，那么 初始化的状态 就是 pending 进行中，它不会返回任何值，只会 处于 等待里面的事务执行成功或失败。

当需要返回值的时候，你必须要 给它一个 标识， 告诉它成功了，或者失败了。如果想要把 状态 改为 fulfilled，那么就需要调用 resolve(data) 函数。这个括号里面的 data 就是成功后 要 返回的 数据。同理，如果 你把它的状态 改为失败的话，也需要 reject(data); 这样就可以 返回 失败的数据了。

• 一旦状态改变，就不会再变。 从pending变为fulfilled和从pending变为rejected状态，只要处于fulfilled和rejected，状态就不会再变。

缺点：

• 无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
• 如果不设置回调函数，Promise内部抛出错误，不会反应到外部。
• 当处于pending状态时，无法得知目前进展到哪一阶段。

如果要对 一个 异步操作 使用 Promise 的话，必须 在 这个 异步操作的 前面 加一个 await 。并且 整个 作用域 都要 被 async 修饰。

这样的话，request 就必须要 返回 一个 Promise 实例了。

config.js

export default {
    host:"http://localhost:3000/"
}

import config from "./config";
export default (url,data = {type:2},method = "GET") => {
    return new Promise((resolve, reject) => {
        wx.request({
            url:config.host+ url,
            data,
            method,
            success:(res) => {
                // 修改 Promise 状态 为 成功状态
                resolve(res.data);// 成功后要 返回什么数据
                //你就在 括号里 传入什么数据即可
            },
            fail:(err) => {
                reject(err);
            }
        })
    });
}