ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【JS高级】Promise

2022-08-08 10:31:33  阅读:262  来源: 互联网

标签:resolve await 高级 JS promise reject 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

  • pending 未决定的
  • resolved / fullfilled 成功
  • rejected 失败
  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)如何先改状态再指定回调?

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

(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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有