Promise 和 async + await

参考网站:(https://www.jianshu.com/p/f12fd73a7c59)

1. Promise 作用是什么?

用来解决异步数据回调的问题.
在 promise 中有两个回调参数: 回调成功参数 resoved, 回调失败参数 reject

promise 的基本使用

var  promise=new Promise（function( resoved, reject){ })

注：这是一个异步操作，其中function 内部写的就是具体的异步操作

2. 怎么使用

在链式调用的时候,使用.then 方法为后续的成功或失败的回调提供预定,解决回调异步问题.

示例:

getFIiePath(path){
            var  promise= new Promise(function(resolve,reject){

                if (err) {
                 // 数据请求失败回调
                  return reject(err)
               }
                
               // 数据请求成功回调
                resolve(data){ }
            })
              return promise;
        },

getFIiePath(xxx_路径).then( succse( data){
        // 数据成功回调
 } , fail(err ){ 
      // 数据请求失败
 } )

流程:
1. 上一个 .then 中，return 一个新的 promise 实例，可以继续用下一个 .then 来处理
2.promise 一旦出错，进行捕获，继续执行下去，否则，不会继续执行
3.如果不想前面的 promise 出错，操作被终止，可以为每个 promise 指定失败的回调捕捉

4. 工作流程

图片描述

3. async + await 实现异步请求同步化

同步函数：立即执行，完全执行完了才结束，不会放入回调队列中
异步函数：不会立即执行，会放入回调队列中将来执行

await关键字（详见下面的代码）后必须跟Promise对象，否则会阻塞之后代码的执行

示例:

            p1() {
                return new Promise((resolve, rejecte) => {
                    resolve('11111111')
                })
            },

            p2() {
                return new Promise((resolve, rejecte) => {
                    resolve('222222222')
                })
            },

            p3() {
                return new Promise((resolve, rejecte) => {
                    resolve('33333333333')
                })
            },

            async show() {
                let a = await this.p1().then((data, error) => {
                    console.log(data)
                })
                let b = await this.p2().then((data, error) => {
                    console.log(data)
                })
                let c = await this.p3().then((data, error) => {
                    console.log(data)
                })
            },

         //调用
        this.show()

结果: 
 11111111  
 222222222  
 33333333333  

或者

getAllClass: () => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASE_URL + 'class/getClassList',
            success: (res) => {
                store.commit('setAllClass', res.data);
                resolve('suc');
            },
            fail: (err) => {
                reject('err')
            }
        });
    })
}

// 调用
initPage: async function () {
    await api.getAllClass();   // 关键点
    this.getUserClassInfo(this.userInfo.selectedClass);
}