Promise的应用激励广告的封装 uniapp 封装模块使用方法什么是宏任务和微任务事件循环（event loo

激励广告的封装

uniapp
封装模块

let videoAd = null;
let adVideoUtils = {
  /**
   * videoAdInit 初始化广告
   */
  videoAdInit(adUnitId) {
    if (videoAd) {
      videoAd = null;
    }
    if (uni.createRewardedVideoAd) {
      videoAd = uni.createRewardedVideoAd({
        adUnitId: adUnitId,
      });
      if (videoAd) {
        videoAd.onError((err) => {
          console.log(err);
        });
      }
      // return videoAd;
    }
  },
  /* 显示广告 ture为播放完成 */
  videoAdShow() {
    return new Promise((resolve, reject) => {
      adVideoUtils._showAd().then((val) => {
        if (val) {
          videoAd.onClose((res) => {
            if (res.isEnded) {
              //成功 给予奖励
              resolve(true);
            } else {
              resolve(false);
            }
          });
          videoAd.onError((err) => {
            if (err.errCode == "1004") {
              reject("1004");
            } else {
              reject(err);
            }
          });
        } else {
          reject(err);
        }
      });
    });
  },
  _showAd() {
    return new Promise((resolve) => {
      videoAd
        .show()
        .then(() => {
          console.log("广告显示成功");
          resolve(true);
        })
        .catch((err) => {
          console.log("广告组件出现问题", err);
          // 可以手动加载一次
          videoAd
            .load()
            .then(() => {
              console.log("手动加载成功");
              resolve(true);
              // 加载成功后需要再显示广告
              return videoAd.show();
            })
            .catch((err) => {
              resolve(false);
              console.log("广告组件出现问题2次加载", err);
              // this.showUToast("加载失败啦，请稍后在试", "error");
            });
        });
    });
  },
};
export default adVideoUtils;

使用方法

//全局注册
import ad from "./utils/ad.js";
Vue.prototype.$jiad = {
  ...ad,
};
//页面加载
onLoad() {
    this.$jiad.videoAdInit(this.ad.ad3);
}
//页面使用
uni.showModal({
    content: '观看视频进行识别',
    success: function(res3) {
        if (res3.confirm) {
            console.log('用户点击确定');
            this.$jiad.videoAdShow()
                .then((res2) => {
                if (res2) {
                    // 成功
                 // 成功回调
                } else {
                    // 失败
                    uni.showModal({
                        content: '激励视频打开失败'
                    })
                }
            })
                .catch((err) => {
                this.showUToast("视频加载失败了,稍后在试", "error");
            });
        } else if (res3.cancel) {
            console.log('用户点击取消');
        }
    }
});

什么是宏任务和微任务

事件循环（event loop）

当前页面整体代码会当做一个宏任务被丢进宏队列。然后被事件循环调用。事件循环把代码推到调用栈里按顺序执行。当执行到setTimeout时，会把setTimeout的回调存在web api中，然后浏览器开始监视这个dom事件，栈代码继续执行。当setTimeout条件触发时。浏览器把保存的回调丢进宏队列里。然后被事件循环拿出来推给栈执行。

异步使用回调，是基于event loop
dom事件也使用回调，基于event loop

- dom事件的逻辑与异步一样。当用户打开一个页面。当前页面整体代码会当做一个宏任务被丢进宏队列。然后被事件循环调用。事件循环把代码推到调用栈里按顺序执行。当执行到dom事件，会把事件回调存在web api中，然后浏览器开始监视这个dom事件。当事件触发时。浏览器把保存的回调丢进宏队列里。然后被事件循环拿出来推给栈执行。

当浏览器发现栈当中没有东西的时候以及微任务队列没有东西就渲染dom。
流程为：首先执行栈的代码。其按顺序执行。当执行到微任务就把回调放在微任务队列里。遇到宏任务就放在宏任务队列里，然后执行完后,清空调用栈。然后回头看看微任务队列有没有东西。有就执行。没有就直接渲染dom。渲染完后就去执行事件循环找宏任务。

JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：

当栈里执行按顺序执行代码，执行到Promise.then这种微任务,会把任务的回调存再微任务队列当中，当栈执行和完毕，会首先清空栈。然后看看有没有微任务，有的话执行微任务。然后渲染当前dom。最后触发事件循环。

宏任务（macrotask）： 宏任务是由宿主（浏览器、Node）发起的、dom渲染后触发。

- 异步 Ajax 请求、
- setTimeout、setInterval、
- 文件操作
- 其它宏任务

微任务（microtask）： 微任务由 JS 自身发起、dom渲染之前触发。

- Promise.then、.catch 和 .finally
- process.nextTick
- 其它微任务

宏任务和微任务的执行顺序

- 每一个宏任务执行完之后，都会检查是否存在待执行的微任务，
- 如果有，则执行完所有微任务之后，再继续执行下一个宏任务。

举例说明：

A和B去银行进行取钱，要进行排队窗口办理（宏任务队列）

银行只有一个柜员进行办理业务，A在办理业务，B只能等待（单线程，宏任务按次序执行）

A办理业务后，柜员询问他是否要办理其他业务（当前宏任务执行完，检查是否有微任务）

A跟柜员说想办个卡（执行微任务，后续宏任务被推迟）

A办完离开后，柜员继续给B进行办理业务（下一个宏任务）

代码举例：

Promise功能用法

Promise 用处

用promise能够支持链式调用, 可以解决回调地狱问题

什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件

- 回调地狱举例

//地狱回调
setTimeout(function () {  //第一层
  console.log('张三');//等3秒打印张三在执行下一个回调函数
  setTimeout(function () {  //第二层
    console.log('李四');//等2秒打印李四在执行下一个回调函数
    setTimeout(function () {   //第三层
      console.log('王五');//等一秒打印王五
    }, 1000)
  }, 2000)
}, 3000)

- promise解决方案

// promise解决方式
function fn(str,time) {
    return new Promise(function (success, error) { //success 是成功的方法  error是失败的方法  
        //处理异步任务
        var flag = true;
        setTimeout(function () {
            if (flag) {
                success(str)
            }
            else {
                error('失败')
            }
        },time)
    })
}
 
fn('张三',3000)
    .then((res) => { //then是成功执行的方法 返回的还是一个promise对象
        console.log(res);//打印张三  res是执行
        return fn('李四',2000);
    })
    .then((res) => {
        console.log(res);
        return fn('王五',1000)
    })
    .then((res) => {
        console.log(res);
    })
    .catch((res) => { //catch是失败执行的方法
        console.log(res);
    })

理解

简单表达:

- Promise 是一门新的技术(ES6 规范)
- Promise 是 JS 中进行异步编程的新解决方案
  备注：旧方案是单纯使用回调函数

具体表达:

- 从语法上来说: Promise 是一个构造函数
- 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值

特点

Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），该状态不受外界影响。
状态可以从pending变为fulfilled，或者从pending变为rejected。一旦状态改变，就不会再变。

- pending 变为 resolved
- pending 变为 rejected
- 说明: 只有这 2 种, 且一个 promise 对象只能改变一次无论变为成功还是失败, 都会有一个结果数据成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

缺点

Promise一旦新建它就会立即执行，无法中途取消
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
当处于pending状态时，无法得知目前的进展是刚开始还是即将完成

promise的基本流程

promise 的基本使用

基本编码流程

// 1) 创建 promise 对象(pending 状态), 指定执行器函数
const p = new Promise((resolve, reject) => {
  // 2) 在执行器函数中启动异步任务
  setTimeout(() => {
    const time = Date.now()
    // 3) 根据结果做不同处理
    // 3.1) 如果成功了, 调用 resolve(), 指定成功的 value, 变为 resolved 状
    态
    if (time % 2 === 1) {
      resolve('成功的值 ' + time)
    } else { // 3.2) 如果失败了, 调用 reject(), 指定失败的 reason, 变为rejected 状态
      reject('失败的值' + time)
    }
  }, 2000)
})

// 4) 能 promise 指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason
p.then(
  value => { // 成功的回调函数 onResolved, 得到成功的 vlaue
    console.log('成功的 value: ', value)
  },
  reason => { // 失败的回调函数 onRejected, 得到失败的 reason
    console.log('失败的 reason: ', reason)
  }
)

简单举例（ajax的封装）

function promiseAjax(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = () => {
      if (xhr.readyState!==4) return
      const {status, response} = xhr
      // 请求成功, 调用 resolve(value)
      if (status>=200 && status<300) {
        resolve(JSON.parse(response))
      } else { // 请求失败, 调用 reject(reason)
        reject(new Error('请求失败: status: ' + status))
      }
    }
    xhr.open("GET", url)
    xhr.send()
  })
}

// 调用
promiseAjax('https://api.apiopen.top2/getJoke?page=1&count=2&type=video')
              .then(
                data => {
                  console.log('显示成功数据', data)
                },
                error => {
                  alert(error.message)
                }
              )

如何使用 Promise

相关api

- Promise 构造函数: Promise (excutor) {}

- - (1) executor 函数: 执行器 (resolve, reject) => {}
  - (2) resolve 函数: 内部定义成功时我们调用的函数 value => {}
  - (3) reject 函数: 内部定义失败时我们调用的函数 reason => {}
  - 说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

- Promise.prototype.then 方法: (onResolved, onRejected) => {}

- - (1) onResolved 函数: 成功的回调函数 (value) => {}
  - (2) onRejected 函数: 失败的回调函数 (reason) => {}
  - 说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象

- Promise.prototype.catch 方法: (onRejected) => {}

- - (1) onRejected 函数: 失败的回调函数 (reason) => {}
  - 说明: then()的语法糖, 相当于: then(undefined, onRejected)

- - - 拓展：展业名词----语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。

- Promise.resolve 方法: (value) => {}

- - (1) value: 成功的数据或 promise 对象
  - 说明: 返回一个成功/失败的 promise 对象

// 如果传入的参数为 非Promise类型的对象, 则返回的结果就是当前Promise对象结果状态
let p0 = Promise.resolve('hello')
// 如果传入的参数为 Promise 对象, 则传入的 Promise 对象的结果状态就是当前Promise对象结果状态
let p1 = Promise.resolve(new Promise((resolve,reject)=>{
  reject('error')
}))
console.log('p0:',p0);
console.log('p1:',p1);

- - 结果：

- Promise.reject 方法: (reason) => {}

- - (1) reason: 失败的原因
  - 说明: 返回一个失败的 promise 对象

- Promise.all 方法: (promises) => {}

- - (1) promises: 包含 n 个 promise 的数组
  - 说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败

// 当p0,p1,p2必须全部正确才能正常返回所有结果，有一个错就会报错。相当于与门
    let p0 = new Promise((resolve,reject)=>{
      resolve('ok')
    })
    let p1 = Promise.resolve('200')
    let p2 = Promise.resolve('success')
    
    const result = Promise.all([p0,p1,p2])
    console.log(result);

- Promise.race 方法: (promises) => {}

- - (1) promises: 包含 n 个 promise 的数组
  - 说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

promise 的几个关键问题

- 如何改变 promise 的状态?

- - resolve(value): 如果当前是 pending 就会变为 resolved
  - reject(reason): 如果当前是 pending 就会变为 rejected
  - 抛出异常: 如果当前是 pending 就会变为 rejected newPromise((resolve,reject)=>{throw'error'})

- 一个 promise 指定多个成功/失败回调函数, 都会调用

// p的三个then都会执行
let p = new Promise((resolve,reject)=>{
  resolve(1)
})
p.then(res=>{
  console.log(res);
})
p.then(res=>{
  console.log(res);
})
p.then(res=>{
  console.log(res);
})

- 改变 promise 状态和指定回调函数谁先谁后?

- - (1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
  - (2) 如何先改状态再指定回调?

- - - ① 在执行器中直接调用 resolve()/reject()
    - ② 延迟更长时间才调用 then()

- - (3) 什么时候才能得到数据?

- - - ① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
    - ② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

- - 举例：

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('OK');
    }, 1000);
});

// 这里因为在promise里是一个异步任务，所以这里是then方法先执行，但是then方法里的回调却需要等resolve改变结果之后才执行。
p.then(value => {
    console.log(value);
},reason=>{
    
})

- promise.then()返回的新 promise 的结果状态由什么决定?

- - (1) 简单表达: 由 then()指定的回调函数执行的结果决定
  - (2) 详细表达:

- - - ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
    - ② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
    - ③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

let p = new Promise((resolve,reject)=>{
  resolve('ok')
})
let result = p.then(value=>{
  console.log(value);
},reason=>{
  console.log(reason);
})
// 这个时候 p.then返回的promise对象状态为fulfilled,但是结果返回值为undefined
console.log(result);

let result1 = p.then(value=>{
  console.log(value);
  throw 'error'
},reason=>{
  console.log(reason);
})
// 这个时候 p.then返回的promise对象状态为rejected,但是结果返回值为抛出的错误
console.log(result1);

let result2 = p.then(value=>{
  console.log(value);
  return 'success'
},reason=>{
  console.log(reason);
})
// 这个时候 p.then返回的promise对象状态为fulfilled,但是结果返回值为return的值
console.log(result2);

let result3 = p.then(value=>{
  console.log(value);
  // return new Promise((resolve,reject)=>{
  //   resolve('Promise success')
  // })
  return Promise.resolve('Promise success')
},reason=>{
  console.log(reason);
})
// 这个时候 p.then返回的promise对象状态为return的promise对象的状态,但是结果返回值为return的promise对象的状态值
console.log(result3);


// 以此为依据的链式调用（then的返回结果为promise，而这个promise的状态是由他自身的回调函数的返回值决定的）
new Promise((resolve,reject)=>{
  resolve(1)
}).then(res=>{
  console.log(res);
  return res+1
}).then(res=>{
  console.log(res);
  return res+1
}).then(res=>{
  console.log(res);
})

new Promise((resolve,reject)=>{
  resolve(1)
}).then(res=>{
  console.log(res);
  return Promise.resolve(res+1)
}).then(res=>{
  console.log(res);
  return Promise.resolve(res+1)
}).then(res=>{
  console.log(res);
})

- promise 如何串连多个操作任务?

- - (1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用
  - (2) 通过 then 的链式调用串连多个同步/异步任务

- promise 异常传透?

- - (1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
  - (2) 前面任何操作出了异常, 都会传到最后失败的回调中处理

// 在链式调用中只需要在最后进行.catch()就能捕获到整个链式中的任意一个错误。
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK');
    // reject('Err');
  }, 1000);
});

p.then(value => {
  // console.log(111);
  throw '失败啦!';
}).then(value => {
  console.log(222);
}).then(value => {
  console.log(333);
}).catch(reason => {
  console.warn(reason);
});

- 中断 promise 链?

- - (1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
  - (2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK');
  }, 1000);
});
p.then(value => {
  console.log(111);
  //有且只有一个方式
  // 当返回一个pending状态的promise对象，then返回的就是一个没有改变状态的promise对象，就没有办法走下去了
  return new Promise(() => { });
}).then(value => {
  console.log(222);
}).then(value => {
  console.log(333);
}).catch(reason => {
  console.warn(reason);
});

promise风格的封装

微信小程序的request

// 封装函数
const request = (param)=>{
  wx.showLoading({
    title: '加载中',
  })
  return new Promise((resolve,reject)=>{
    wx.request({
      ...param,
      url:'http://127.0.0.1:666'+param.url,
      success(res){
        resolve(res)
      },
      fail(err){
        reject(err)
      },
      complete(){
        wx.hideLoading()
      }
    })
  })
}
export default request

// 调用
import request from '../utils/request'
onLoad(options) {
  request({url:'/aaa'}).then(res=>{
    console.log(res);
    return request({url:'/bbb'})
  }).then(res=>{
    console.log(res);
    return request({url:'/ccc'})
  }).then(res=>{
    console.log(res);
  })
},

async与await

async 函数

- 函数的返回值为 promise 对象
- promise 对象的结果由 async 函数执行的返回值决定

await 表达式

- await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
- 如果表达式是 promise 对象, await 返回的是 promise 成功的值
- 如果表达式是其它值, 直接将此值作为 await 的返回值

注意

- await 必须写在 async 函数中, 但 async 函数中可以没有 await
- 如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理

const util = require('util')
const fs = require('fs')
const minReadFile = util.promisify(fs.readFile)

async function main(){
  try {
    let data1 = await minReadFile('./resource/1.html')
    let data2 = await minReadFile('./resource/2.html')
    let data3 = await minReadFile('./resource/3.html')
    console.log(data1,data2,data3);
  } catch (error) {
    console.log(error.code);
  }
}

main()