Promise的理解和使用(二)

一、Promise的常用API
promise的这些方法执行完成都会返回一个新的promise,promise的状态由执行的结果决定。

(1) new Promise()中的excutor函数

new Promise((resolve, reject)=>{
  // 根据处理的内容来返回成功或者失败
  resolve(1)
})

excutor函数是在JS主线程中的,一旦声明就会立即执行

(2) Promise.prototype.then
then方法是提供给Promise实例对象使用的方法,通过then可以获取promise的执行结果,这个方法里的执行需要等到主线程执行完成之后才执行,属于微任务。
onResolved 表示成功的执行方法,通常写成 value => { }
onRejected 表示失败的执行方法,通常写成 reason => { }

const promise = new Promise((resolve, reject)=>{
    setTimeout(()=>{
          resolve(1)
     }, 1000)
})

promise.then(
    value => { console.log('成功', value)},
    reason => { console.log('失败', reason)} 
)
// 执行结果--- 成功 1

(3) Promise.prototype.catch
catch是提供给Promise实例对象使用的方法,通过catch来处理失败,处理失败的方法有两种,一种是通过上面的then方法,对每次的promise执行定义处理成功和处理失败的函数,第二种就是直接使用catch方法,可以进行一个错误穿透,不需要每次在then里定义失败的处理方法

const promise = new Promise((resolve, reject)=>{
    setTimeout(()=>{
          reject(0)
     }, 1000)
})

promise.then(
    value => { console.log('成功', value)}
).catch(
    error => { console.log('error', error)}
)
// 执行结果--- error 0

(4) Promise.resolve
定义在构造函数Promise自身的方法,不需要创建实例对象,可直接返回执行成功

Promise.resolve(2)
.then(value=>{
    console.log('成功', value)
})
// 执行结果--- 成功 2

(5)Promise.reject
定义在构造函数Promise自身的方法,不需要创建实例对象,可直接返回执行成功

Promise.reject(-1)
.then(value=>{
    console.log('成功', value)
})
.catch(error=>{
    console.log('error', error)
})
// 执行结果--- error -1

(6) Promise.all
定义在构造函数Promise自身的方法,接收一个由promise实例组成的数组,当所有的promise都执行完成且成功才会返回成功(result为成功数据的数组),只要有一个失败就会返回失败。

const p1 = new Promise((resolve, reject)=>{
    setTimeout(()=>{
         resolve(1)
     }, 2000)
})

const p2 = new Promise((resolve, reject)=>{
    setTimeout(()=>{
         resolve(2)
     },1000)
})

Promise.all([p1,p2])
.then(value=>{
    console.log('value', value)
 })

// 2s后输出,执行结果--- value [1, 2]

(7) Promise.race
定义在构造函数Promise自身的方法,和all一样,接收由promise实例组成的数组,区别在于,race方法是进行promise实例执行方法速度的比较,返回最快完成的异步操作

const p1 = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve(1)
     }, 2000)
})
const p2 = new Promise((resolve, reject)=>{
      setTimeout(()=>{
         resolve(2)
     },1000)
})
Promise.race([p1,p2])
.then(value=>{
    console.log('value', value)
})
// 2s后输出,执行结果--- value 2

二、async和await
async和await合并使用,可以让promise的调用更加的简洁,看上去就像是同步的。
(1) async修饰函数,函数执行的返回值是一个promise对象,结果由函数的返回值决定,当没有返回值或者返回任意非promise的值时,状态为成功,当返回promise,由返回的promise里的执行的结果决定。
另外,async可不与await一起使用,但await必须在async 函数中使用
image

(2) await后跟表达式,可以是promise,也可以跟非promise,当后面的表达式是promise时,await + 表达式的结果为promise的执行结果,当表达式不是promise时,await + 表达式的结果为表达式自身。
image

(3) await的执行需要放在try catch里面进行错误的捕获,如果没有捕获错误,那么出错了代码就不能向下进行
格式如:

try {
   // await的执行代码
} catch(error){
  // 错误的处理代码
}

image

hello

118 声望
10 粉丝
0 条评论
推荐阅读
JavaScript中单例模式这样用
如果希望自己的代码更优雅、可维护性更高以及更简洁,往往离不开设计模式这一解决方案。在JS设计模式中,最核心的思想:封装变化(将变与不变分离,确保变化的部分灵活,不变的部分稳定)。单例模式那么来说说第...

一颗冰淇淋3阅读 1.6k

手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen152阅读 17.8k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.5k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 7.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.6k评论 6

hello

118 声望
10 粉丝
宣传栏