其他分享
首页 > 其他分享> > 【JS高级】Promise

【JS高级】Promise

作者:互联网

什么是Promise

*promise内部代码会同步执行(如果不加异步任务)

.then中的代码是异步执行的


  1. 抽象表达
    1. Promise是一门新的技术(ES6规范)
    2. Promise是JS中进行异步编程的新解决方案
    3. 备注:旧方案是单纯使用回调函数
  2. 具体表达
    1. 从语法上来说: Promise是一个构造函数
    2. 从功能上来说: promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

特点:支持链式调用,可以解决回调地狱问题 -----面试常考

回调地狱

image

image

promise构造函数有两个参数,分别为resolve,reject,resolve表示成功

会进入.then(()=>{},()=>{})中的第一个方法,reject会进入第二个方法/或者catch


new Promise((resolve,reject)=>{
  // 内包裹异步任务
})

Promise封装练习

image


image

使用

image

Promise封装练习

function sendAjax(url) {
      return new Promise((resolve, reject) => {
        axios("get", url, (err, result) => {
          if (err) {
            reject(err);
          }
          resolve(result);
        });
      });
    }
    
    
    sendAjax("http://127.0.0.1").then(
      (result) => {
        console.log(result);
      },
      (err) => {
        console.log(err);
      }
    );

promise状态的改变

状态:实例对象中的一个属性------Promisetate

  1. pending变为resolved
  2. pending变为rejected

说明:只有这2中,且一个promise对象只能改变一次

	无论变为成功还是失败,都会有一个结果数据

	成功的结果一般成为value,失败的结果一般称为reason

Promise对象的值----PromiseResult

保存着对象【成功/失败】的结果

resolve(xxx)

reject(xxx)

以上均可修改PromiseResult的值

promise的工作流程

image

Promise.resolve()方法

image

Promise.reject()方法

传入的任何值都为错误

image

Promise.all()方法

说明:返回一个新的promise,只有所有的 promise都成功才成功,只要有一个失败了就直接失败,成功的值为一个数组,保存着每一个promise的结果值

image

只要有一个失败,返回结果就为失败的Promise的结果

Promise.race()方法

说明:返回一个新的 promise,第一个完成的 promise 的结果状态就是最终的结果状态

image

Promise的几个关键问题

改变其状态的三种方式

image

若为其实例指定多个.then回调函数,那么所有的回调函数都会执行

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

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

(2)如何先改状态再指定回调?

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

promise如何串连多个操作任务

(1)promise 的then()返回一个新的 promise, 可以看成then()的链式调用

(2)通过 then的链式调用串连多个同步/异步任务

promise的异常传透

(1)当使用promise 的then链式调用时,可以在最后指定失败的回调,

(2)前面任何操作出了异常,都会传到最后失败的回调中处理

image

promise的中断

image

自定义(手写)promise

https://www.bilibili.com/video/BV1GA411x7z1?p=28&spm_id_from=pageDriver&vd_source=9be15c346432f1064d85ec92b746747f

Async与await

Async

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

image


Await

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

注意

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

image

await与async结合使用

image

标签:resolve,await,高级,JS,promise,reject,Promise,回调
来源: https://www.cnblogs.com/lshifu/p/16560912.html