class12：基于promise的异步API、全局数据共享mobx

一、将基于回调函数的异步API进行promise化

即基于promise的异步API。

1.安装miniprogram-api-promise

链接: https://www.npmjs.com/package/miniprogram-api-promise

• cmd：npm install --save miniprogram-api-promise （定义版本号：末尾@+版本号）推荐版本：1.0.4

我们希望将小程序中基于异步的api全部promise化，所以可以在全局app.js文件中配置：

// app.js
// 导入
import {promisifyAll} from 'miniprogram-api-promise';
const wxp = wx.p = {}; // 定义空对象接收wx

// 调用
promisifyAll(wx, wxp);// 将顶层对象wx挂载到空对象wxp

示例：

<!--pages/home/home.wxml-->
<van-button type="info" bindtap="getData">发起请求</van-button>

// pages/home/home.js
Page({
    async getData(){
        const res = await wx.p.request({
            url:"http://localhost:4000/goodsList",
            method:"GET",
        });
        console.log(res);// 与res为同步，与request为异步
    }, 
})

遇到的问题： cmd安装pomise失败。
解决方法： 正常情况下应该是先安装完promise模块再删除小程序中的miniprogram_npm文件夹，但是如果promise安装失败可以尝试先删除文件夹再安装模块，如果不行，在以下操作中多重复几次：
删除miniprogram_npm文件夹 -> 安装promise模块 -> 构建npm

注：总之最后要删掉miniprogram_npm文件夹再重新构建npm再运行小程序。

二、全局数据共享mobx

1.安装npm包

mobx-miniprogram : 相当于数据共享仓库，用于存放各种数据，放便用户存取操作；

mobx-miniprogram-bindings ： 介于数据共享仓库和组件页面之间的桥梁，使二者能够相互联系。

如图A传递数据到B：

• 红线表示传统数据传递方式，即通过一层一层传递到目的栈，非常麻烦；
• 黄线表示通过数据共享仓库传递数据，非常方便；
• 蓝线说明了数据共享仓库可以给任意数据节点传递数据；
• 需要指出，通过数据共享仓库传递的数据是双向绑定的，当数据改变，那么另一节点中的相同数据也会发生改变。

安装cmd：

npm install mobx --save mobx-miniprogram mobx-miniprogram-bindings

注：安装完后删除miniprogram_npm文件夹再重新构建npm。

2.在页面使用store mobx

新建根文件夹store并新建store.js文件存放mobx实例：

// store.js
// 创建mobx store实例对象（共享的数据仓库）
// 导入
// 如果要使用action函数修改数据，需要在导入时加入action字段
import {action, observable} from "mobx-miniprogram"

// 导出
export const store = observable({
    // 数据字段
    numA: 1,
    numB: 2,

    // 计算属性：做简单运算，必须返回一个结果值，声明计算属性时需加get修饰
    // 使用计算属性只需写属性名即可，不加括号
    get sum(){
        return this.numA + this.numB;
    },

    // action函数修改数据
    updataNumA: action(function(val){
        this.numA += val; // 修改store中的数据
    }),
    updataNumB: action(function(val){
        this.numB += val; // 修改store中的数据
    })
});
// module.exports = {store}

注：考虑到数据的管理和安全，mobx store里的数据不允许外界直接修改，必须通过store对象中的action函数修改。

实例：

// pages/home/home.js
// 导入store mobx数据仓库
import {store} from "../../store/store"

// 使用bindings包搭建页面与数据仓库之间的桥梁
import {createStoreBindings} from "mobx-miniprogram-bindings";

Page({
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // 绑定mobx store对象
        // 第一个参数为将数据绑定到的地方，如此处为该页面
        // 第二个参数为要绑定的数据
        this.storeBindings = createStoreBindings(this, {
            store: store, // 指定store为数据源
            fields: ["numA", "numB", "sum"], // 将store中需要使用的数据映射到页面的this.data中
            actions: ["updataNumA", "updataNumB"], // 将store中需要使用到的action方法映射到页面
        });
        //console.log(this); 
    },
    // 修改changeNumA
    changeNumA(e){
        console.log(e);
        this.updataNumA(e.target.dataset.val);
    },
    
    // 修改changeNumB
    changeNumB(e){
        console.log(e);
        this.updataNumB(e.target.dataset.val);
    },

    // 生命周期函数：监听页面卸载
    onUnload: function(){
        // 清理工作
        this.storeBindings.destroyStoreBindings(); // 解绑mobx数据对象
    }
})

<!--pages/home/home.wxml-->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="info" bindtap="changeNumA" data-val="{{1}}">numA+1</van-button>
<van-button type="info" bindtap="changeNumB" data-val="{{-1}}">numB-1</van-button>

注：

• fields字段内添加的是需要用到的数据字段，相当于把数据添加到该页面的data中用以使用；
• actions字段内添加的是需要修改的数据方法，相当于把方法添加到该页面中以方便使用；
• action的修改函数中传入了参数val，用户可自定义传入的val以改变加数，可在按钮中通过”data-”传参；
• 传入的val可以在事件对象中找到以使用，”e.target.dataset.val”；
• 通过action修改数据后原始数据也发生改变，即双向绑定;
• action函数使用方式如下（changeName为属性名，可自定义）：

changeName: action(function(){})

3.在组件使用store mobx

• 首先要配置好组件并能使用；
• 在组件js文件中导入和配置store mobx；其中字段会与页面不同：store、storeBindingsBehavior；
• 做绑定功能：behaviors: [storeBindingsBehavior]；
• 配置对象：storeBindings: {}；
• 配置对象中的字段与页面相同都为：store、fields、actions，但它们代表对象；
• 上述三个字段中的对象名可自定义，且在wxml页面中需用该名字来引用，但一般取名与属性值的名字相同。

<!--pages/home2/home2.wxml-->
<my_test02></my_test02>

<!--components/test02/test02.wxml-->
<!-- <text>components/test02/test02.wxml</text> -->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="info" bindtap="changeNumA" data-val="{{1}}">numA+1</van-button>
<van-button type="info" bindtap="changeNumB" data-val="{{-1}}">numB-1</van-button>

// components/test02/test02.js
// 导入store mobx数据仓库
import {store} from "../../store/store"

// 使用bindings包搭建页面与数据仓库之间的桥梁
import {storeBindingsBehavior} from "mobx-miniprogram-bindings";

Component({
    // 在behaviors添加storeBindingsBehavior来做绑定功能
    behaviors: [storeBindingsBehavior],

    // 配置对象
    storeBindings: {
        store: store, //指定要绑定的数据源
        fields: {
            numA: "numA",
            numB: "numB",
            sum: "sum",
        },
        actions: {  // 指定要使用的action方法
            updataNumA: "updataNumA",
            updataNumB: "updataNumB",
        },
    },

    // 组件的方法列表
    methods: {
        // 修改changeNumA
        changeNumA(e){
            // console.log(e);
            this.updataNumA(e.target.dataset.val);
        },

        // 修改changeNumB
        changeNumB(e){
            // console.log(e);
            this.updataNumB(e.target.dataset.val);
        },
    }
})