3.使用 npm 包 -API Promise 化
(1). 基于回调函数的异步 API 的缺点
默认情况下，小程序官方提供的异步API 都是基于回调函数实现的，列如: 网络请求的API需要按照如下的方式调用:
wx.request({ method: '', url:'', data:{}, success:()=>{}, // 请求成功的回调函数 fail:()=>{}, // 请求失败的回调函数 complete:()=>{} // 请求完成的回调函数 })
缺点: 容易造成回调地狱的问题，代码的可读性、维护性差!
(2).什么是 API Promise 化
API Promise化，指的是提供额外的配置，将官方提供的、基于回调函数的异步API，升级改造为基于Pormise的异步API，从而提高代码的可读性、维护性，维护性，避免回调地狱的问题。
(3).实现 API Promise化
在小程序中，实现API Promise化主要依赖于 miniprogram-api-promise这个第三方的npm包。
npm i --save miniprogram-api-promise@1.0.4
记住: 我们每次在微信小程序安装一个包，我们不能够立马进行使用，我们需要重新构建npm。
第一步: 删除包
第二步 重新构建
第三步: 成功之后
(4).使用 API Promise 化
- 第一步在 app.js中引入
app.js
在小程序入口文件中(app.js)，只需调用一次promisifyAll()方法.即可实现异步 API 的promise化。
// app.js import {promisifyAll} from 'miniprogram-api-promise' const wxp=wx.p={} promisifyAll(wx,wxp)
- 在home.wxml
hoem.xml 绑定方法
<!--pages/home/home.wxml--> <text class="t1">首页</text> <van-button type="primary" bindtap="getinfo">默认按钮</van-button>
- 在home.js
Page({ async getinfo(){ const res= await wx.p.request({ method:'GET', url:'https://applet-base-api-t.itheima.net/api/get', data:{ name:'zs', age:20 } }) console.log(res) }, })
不去掉关键字
去掉关键字
(八)、全局数据共享
1.全局数据共享 - 概述
全局数据共享 (又叫做: 状态管理)是为了解决组件之间数据共享的问题。
开发中常用的全局数据共享方案有: Vuex、Redux、MobX等等。
(1).小程序中的全局数据共享方案
在小程序中，可使用 mobx-miniporgram 配合 mobx-miniporgram-bindings 实现全局数据共享。
- mobx-miniporgram 用来
创建Store实列对象。 - mobx-miniporgram-bindings 用来
把Store中的共享数据或方法，绑定到组件或页面中使用。
2.全局数据共享 - MobX
(1).安装MobX相关的包
在项目中运行如下的命令，安装MobX相关的包:
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
删除目录树下的包
构建npm的包
(2).创建MobX的Store实列
store/store.js
// 在这个js文件中，专门来常见Store的实列对象 import { action, observable } from "mobx-miniprogram"; // 引入MobX，这里的数据都不能自定义 // 抛出 Mobx export const store = observable({ // 共享下面的变量 // (1).共享数据字段 numA:1, numB:2, // (2).计算属性 -》 关键字 get 表示这个计算属性是只能 读取的。 get sum(){ return this.numA+this.numB }, // (3).actions 方法 用来修改store中的数据 updateNum1:action(function(step){ // 第一个是 自定义方法名， 第二个是 action this.numA+=step }), updateNum2:action(function(step){ this.numB+=step }) })
(3).将Store中的成员绑定到页面中
home.wxml
// 1. 导入包和实列对象 import { createStoreBindings } from 'mobx-miniprogram-bindings'; import { store } from '../../store/store'; Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 绑定 this.storeBindings= createStoreBindings(this,{ store, // 1.实列对象 fields:['numA','numB','sum'], // 2. 我们在store.js中定义的属性 actions:['updateNum1','updateNum2'] // 3. 我们在store.js中定义的方法 }) }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { // 解除绑定 this.storeBindings.destoryStoreBindings() }, })
