4.网络请求 + promise异步编程

网络请求 wx : request

1.小程序中只能使用 HTTPS 请求
2.域名必须添加到 '域名信任列表'中
3.开发环境，可以设置开发工具中的 详情 - 本地设置 - 不校验合法域名
小程序内的网络请求，不是跨域请求，也不是ajax请求

/**
默认方法是 GET
请求体 body 内容放在 data 字段中
success 默认接收参数是 result 不是 res
字符串一律用 单引号 ' 引用
*/ 
        wx.request({
          url: 'url',
          method : 'POST',
          data : {
            msg : '念念不忘 必有回响'
          },
          success: (result) => {},
          fail: (err) => {},
          complete: (res) => {},
        })

Promise

• Promise 实例化

instantiatePromise() {
        console.log('1.开始执行')
        /*
        语法:
        Promise( (参数1:resole，参数2:reject) => 闭包 )
        参数1、参数2 都是函数类型的回调，可以传参
        闭包: 内部可执行异步函数，并在合适的时机调用 resole、reject，改变Promise 的状态
        */ 
        new Promise((resole, reject) => {
            console.log('2.实例化Promise后会直接执行闭包，Promise自动进入待定状态')
            setTimeout(() => {
                console.log('5.耗时操作执行完成')
                const success = true
                if (success){
                    resole('6.手动调用resole回调，Promise状态 已兑现')
                } else {
                    reject('7.手动调用reject回调，Promise状态 已拒绝')
                }
            }, 3);
            console.log('3.Promise闭包内的异步操作不会阻塞线程')
        })
        console.log('4.当前函数结束')
    }

• Promise + then 链式调用

// 链式调用
    promiseCallChaining() {

        /*
        1. Promise 有两个回调属性支持链式调用，分别是 then 和 catch，没有finally
        2. funcA 和 funcB 的返回值都是 Promise
        */ 
        this.funcA().then((res) => {
            /*
            这里只有一个可能会执行，即 funcA 的 Promise 最终状态是 已兑现（resolv）
            */ 
            return this.funcB()
        }).catch((msg)=>{
            /*
            Promise的 then 和 catch 具备 switch 的穿透特性，因此执行到当前闭包的路径有两种。所以使用 then 和 catch 并不能很好的处理实际业务中的 成功和失败
            1. funcA-return Promise-reject
            2. funcA-return Promise-resolv && funcB-return Promise-reject
            */ 
        })
    }

• Promise + async/await 串行

// async + await 语法结构
    async simplifyCalling () {
        console.log('1')
        // 用 try 捕获 promise已拒绝态，否则会报错
        try {
            console.log('2')
            const resA = await this.funcA();
            // 如果 funcA 返回的是已拒绝，当前代码块内，下面的代码将不会被执行，而是直接跳转到 catch 代码块内
            console.log('3')
            console.log(resA);

            const resB = await this.funcB();
            console.log('4')
            console.log(resB);

          } catch (error) {

            console.log('5')
            // error 即 reject 的传参
            console.log(error);
          }
          console.log('6')
    }