第一次学的时候没学牢固
后面意识到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>
大家最好跟着敲一下? 因为确实迷糊? 跟着敲 体会可能还好点
如果这些代码能对诸位有些许帮助 我会不胜荣幸