再看promise

2023-12-28 14:30:44

第一次学的时候没学牢固

后面意识到promise的重要性之后? 陆陆续续的看、查,终于在今天 感觉好像明白点了

把自己敲的理解分享给大家

?

<!DOCTYPE html>

<html lang="en">

<head>

? <meta charset="UTF-8">

? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? <title>promise</title>

</head>

<body>

? <script>

? ? // "use strict" ?严格模式下 ?函数内this为undefined

? ? // console.log(this);

? ? // function myFunction() {

? ? // ? return this;

? ? // }

? ? // promise三个状态 ?pending初始 ?fulfilled成功 ?rejected失败

? ? // 构造promise对象时候 传入的参数是一个函数 函数中接收两个参数

? ? // resolve reject 都是函数 作用大概可以理解为

? ? // 执行resolve时 把promise的状态从初始变成成功 promise状态变成fulfilled 执行.then方法 ?

? ? // then方法接受的参数也是一个函数 函数中携带一个参数 参数是resolve(res)返回的数据

? ? // 执行reject时 把promise的状态从成功变成失败 promise状态变成rejected 执行catch方法

? ? // catch方法接受的也是一个函数 函数中携带一个参数 该参数为reject(err)返回的数据

? ? // promise的状态变化只有两条线 初始到成功或者初始到失败 ?状态一旦固定 就不会再发生改变

? ? // 以下代码易证上述观点

? ? const p = new Promise((resolve, reject) => {

? ? ? resolve('成功且执行.then')

? ? ? reject('失败且执行.catch')

? ? })

? ? p.then((res) => { console.log(res) }).catch((err) => { console.log(err); })

? ? // 以下代码为promise的链式调用

? ? const pp = new Promise((resolve, reject) => {

? ? ? setTimeout(() => {

? ? ? ? resolve('a')

? ? ? }, 1000)

? ? }).then(res => {

? ? ? // console.log('res1', res);

? ? ? return new Promise((resolve, reject) => {

? ? ? ? setTimeout(() => {

? ? ? ? ? resolve(res + 'a')

? ? ? ? }, 1000)

? ? ? }).then(res => {

? ? ? ? // console.log('res2', res);

? ? ? ? return new Promise((resolve, reject) => {

? ? ? ? ? setTimeout(() => {

? ? ? ? ? ? resolve(res + 'a')

? ? ? ? ? }, 1000)

? ? ? ? })

? ? ? }).then(res => {

? ? ? ? // console.log('res3', res);

? ? ? })

? ? })

? ? // 有些多余 看看如何简写使之优雅

? ? // reject 如果不需要处理失败结果时 我们可以省略掉reject

? ? const ppp = new Promise(resolve => {

? ? ? resolve('a')

? ? }).then(res => {

? ? ? // console.log('res4', res);

? ? ? return new Promise(resolve => { resolve(res + 'a') })

? ? }).then(res => {

? ? ? // console.log('res5', res);

? ? ? return new Promise(resolve => { resolve(res + 'a') })

? ? }).then(res => {

? ? ? // console.log('res6', res);

? ? })

? ? // Promise 嵌套使用时 内层的Promise可以省略不写 所以我们可以直接把Promise相关的去掉 直接返回

? ? const pppp = new Promise(resolve => {

? ? ? resolve('a')

? ? }).then(res => {

? ? ? // console.log('res4', res);·

? ? ? return res + 'a'

? ? }).then(res => {

? ? ? // console.log('res5', res);

? ? ? return res + 'a'

? ? }).then(res => {

? ? ? // console.log('res6', res);

? ? })

? ? // 再来简写个reject参数的promise链式调用

? ? const pppppp = new Promise((resolve, reject) => {

? ? ? reject('a')

? ? }).catch(err => {

? ? ? // console.log('err1', err);

? ? ? return new Promise((resolve, reject) => reject(err + 'a'))

? ? }).catch(err => {

? ? ? // console.log('err2', err)

? ? ? return new Promise((resolve, reject) => reject(err + 'a'))

? ? }).catch(err => {

? ? ? // console.log('err3', err);

? ? })

? ? // 再把嵌套使用内层promise简化一下 把resolve去一下 ?注意 ?如果简化内层promise 需要将return换成throw

? ? const ppppppp = new Promise((resolve, reject) => {

? ? ? reject('a')

? ? }).catch(err => {

? ? ? // console.log('err1', err);

? ? ? throw err + 'a'

? ? }).catch(err => {

? ? ? // console.log('err2', err)

? ? ? throw err + 'a'

? ? }).catch(err => {

? ? ? // console.log('err3', err);

? ? })

? ? // promise的all方法

? ? // promise.all方法 提供并行执行异步操作的能力 在所有异步操作完成之后 同意返回所有的结果 具体使用如下

? ? // 重点是所有的异步操作完成之后

? ? Promise.all(

? ? ? [

? ? ? ? new Promise(resolve => { resolve('ac') }),

? ? ? ? new Promise(resolve => { resolve('bv') })

? ? ? ]

? ? ).then(res => {

? ? ? console.log('all', res);

? ? })

? ? // all 接收到的是一个Promise实例化对象数组 数组长度取决于 Promise实例化对象的个数。

? ? // 一般用于一些游戏类的素材比较多的应用,打开网页时,预先加载需要用到的各类资源,所有的都加载完后,再进行页面的初始化。

? ? // promise的race方法

? ? // 他的使用和all一样 返回结果不同 他是返回执行最快的那个promise

? ? Promise.race(

? ? ? [

? ? ? ? new Promise(resolve => {

? ? ? ? ? setTimeout(() => { resolve('快的') }, 100)

? ? ? ? }),

? ? ? ? new Promise(resolve => {

? ? ? ? ? setTimeout(() => { resolve('慢的') }, 300)

? ? ? ? })

? ? ? ]

? ? ).then(res => {

? ? ? console.log('race', res);

? ? })

? </script>

</body>

</html>

大家最好跟着敲一下? 因为确实迷糊? 跟着敲 体会可能还好点

如果这些代码能对诸位有些许帮助 我会不胜荣幸

文章来源:https://blog.csdn.net/weixin_71104826/article/details/135266132
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。