一篇文章带你了解和使用Promise对象

最新推荐文章于 2024-05-15 20:43:52 发布

vimin_M

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量234

点赞数

分类专栏： javascript 随笔文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45449964/article/details/109572710

版权

javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

随笔

6 篇文章 0 订阅

订阅专栏

Promise的理解与使用

什么是Promise

promise是解决异步编程的一种方案，对比传统的回调函数更加的便捷和强大。

Promise的特点

promise对象的状态不受外界影响，共有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败），且同一时间只能存在一种状态
一旦状态改变就不会被改变，且任何时候都可以得到这个结果；Promise对象的状态改变，只有两种可能：从pending变为fulfilled（后面简称resolved状态）和从pending变为rejected（后面简称rejected状态）。只要这两种情况发生，状态就凝固了，不会再变了。

Promise的基础用法

Promise实例化

Promise实际是一个构造函数，用于生产promise实例

// promise一旦实例化就会立即执行
let promise = new Promise((resolve, reject) => {
	// 异步函数执行成功时执行回调，若resolve函数有带参数，则该参数会传递给回调函数
	resolve()
	// 异步函数执行失败时执行回调，若reject函数有带参数，则该参数会传递给回调函数
	reject()
})

// 如果你希望这个promise是可控的
function controllPromise () {
	return new Promise(...)
}

示例
现在有一个异步函数获取数据，当该异步函数执行完成后打印结果

let fn1 = function () {
	return new Promise((resolve, reject) => {
		// 定时器模拟异步获取数据
		setTimeout(() => {
			// 将获取的结果传入resolve函数中
			resolve('fn1')
		}, 1000)
	})
}
// promise状态改变后会调用then方法绑定的函数，且该函数接收一个参数，该参数默认是undefined，或者是promise函数resolve、reject的值
fn1().then((res) => {
	console.log(res)
})
// 最终打印结果：fn1

resolve函数传入的是promise

还有另外一种情况，若resolve或者reject函数传入的参数是promise对象，那么旧的promise函数对象的状态由新的promise对象的状态来决定，简单的说就是，若resolve或者reject函数传入的参数是promise对象需要等待该promise对象执行完成才会执行回调。

let fn1 = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('fn1')
		}, 1000)
	})
}
let fn2 = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve(fn1())
		}, 1000)
	})
}
fn2().then((res) => {
	console.log(res)
})
// 2s 后打印：fn1

Promise.prototype.then()

then方法是在Promise的原型上的，也就是说，then方法可以被所有Promise实例调用。then方法的第一个参数是resolved状态的的回调函数，第二个参数是rejected状态的回调函数（可选），而且then方法返回的是一个新的promise实例（不是原来的那个），所以then后面还可以继续调用then方法等其他promise实例上的方法
示例

let fn1 = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('fn1')
		}, 1000)
	})
}
fn1().then((res) => {
	console.log(res)
}).then((res) => {
	console.log(res)
})
// 打印结果：fn1  undefined

then方法回调函数的参数与返回值

我们从上面的示例可以知道，then方法回调函数会接收一个变量res（自定义），这个变量实际就是前一个promise实例中resolve方法传入的值，因此会打印 fn1，那么为何后面会打印一个undefined呢，那是因为我们 then 方法没有给返回值，第二个then方法的回调函数接收的参数是上一个then方法回调函数的返回值，我们来看示例
示例

let fn1 = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('fn1')
		}, 1000)
	})
}
fn1().then((res) => {
	// res 会接收上一个promise示例的resolve值
	console.log(res)
	return '我是第二个then方法回调函数的参数'
}).then((res) => {
	// res 会接收上一个then方法的返回值
	console.log(res)
})
// 打印结果：fn1  我是第二个then方法回调函数的参数

同样的，如果回调函数返回值是一个promise，那么他会等待该promise对象执行完成在去执行下一个then方法的回调函数
示例

let fn1 = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('fn1')
		}, 1000)
	})
}
let fn2 = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('fn2')
		}, 1000)
	})
}
fn1().then((res) => {
	console.log(res)
	return fn2()
}).then((res) => {
	console.log(res)
})
// 打印结果：fn1(1s后) fn2(1s后)

Promise.prototype.catch()

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。如果运行中抛出错误，也会被catch()方法捕获
示例

let fn1 = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('fn1')
		}, 1000)
	})
}

let fn2 = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			reject('error test')
		}, 1000)
	})
}

// 接收reject抛出的错误
fn1().then((res) => {
	console.log(res)
	return fn2()
}).then((res) => {
	console.log(res)
}).catch((err) => {
	console.log('error:' + err)
})
// 打印结果：
// fn1
// error:error test

// 接收常规运行抛出的错误，如throw
fn1().then((res) => {
	console.log(res)
	throw('error normal')
}).then((res) => {
	console.log(res)
}).catch((err) => {
	console.log('error:' + err)
})
// 打印结果：
// fn1
// error:error normal

Promise 在resolve语句后面，再抛出错误，不会被捕获，等于没有抛出。因为 Promise 的状态一旦改变，就永久保持该状态，不会再变了。
示例

let fn1 = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('fn1')
			throw 'error'
		}, 1000)
	})
}
fn1().then((res) => {
	console.log(res)
}).catch((err) => {
	console.log(err)
})
// 打印结果
// fn1

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。
示例

// 假设fn1, fn2, fn3是三个获取数据的异步函数
fn1().then(() => {
	return fn2()
}).then(() => {
	return fn3()
}).catch((err) => {
	console.log(err)
})
// 若fn1, fn2, fn3其中一个异步函数抛出错误都会被catch语句捕获

跟传统的try/catch代码块不同的是，如果没有使用catch()方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，这就是说，Promise 内部的错误不会影响到 Promise 外部的代码，通俗的说法就是“Promise 会吃掉错误”。

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  console.log('everything is great');
});

setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123

在链式调用中可以存在多个catch，但一般来说会执行第一个catch到的错误，catch只会捕获到前面抛出的错误，无法捕获到后面函数抛出的错误，所以建议将catch放在链式调用的最后一步

Promise.all()

Promise.all()方法用于将多个promise实例，包装组合成新的Promise实例，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

const all = Promise.all([p1,p2,p3])

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，all的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，all的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

简单来说就是，当p1、p2、p3全部成功的时候执行回调，并返回数组，若有失败返回值则优先返回最先抛出错误那个
示例

function p1() {
   return 1
 }

 function p2() {
   return new Promise((res, rej) => {
     setTimeout(() => {
       res('2')
     }, 4000)
   })
 }

 function p3() {
   return new Promise((res, rej) => {
     setTimeout(() => {
       res('3')
     }, 1000)
   })
 }

 function test_err() {
   return new Promise((res, rej) => {
     setTimeout(() => {
       rej('error')
     }, 3000)
   })
 }
 // 全部成功，返回一个数组，数组包含了返回的结果，且顺序同传入promise时的实例顺序相同
 Promise.all([
   p1(),
   p2(),
   p3()
 ]).then((res) => {
   console.log(res)
 })
// 打印结果
// [1, "2", "3"]

Promise.all([
   p1(),
   p2(),
   p3(),
   test_err()
 ]).catch((res) => {
    console.log(res)
 })
 // 打印结果
 // error

Promise.race

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

const race = Promise.race([p1, p2, p3])

但和Promise.all()方法不同的是，当p1, p2, p3中有一个率先改变状态，那么race的状态就会跟着改变，那个率先改变的Promise示例的返回值就会传递给race的回调函数

我们用一个超时机制的例子来说明一下

// 假设fn1是获取数据的函数，获取数据所用时间未知当获取时间超过3s我们就判断它超时了
function fn1() {
	...
}
function overtime() {
	return new Promise((res ,rej) => {
		setTimeout(() => {
			res('overtime')
		}, 3000)
	})
}
const race = new Promise.race([fn1(), overtime()])
// 若超过3秒，fn1还未获取到数据，就会返回overtime

Promise.resolve()

Promise.resolve()方法可以将一个现有的变量转换为Promise对象

const jsp = Promise.resolve('1')

// 等价于
function jsp = new Promise((res ,rej) => {
	res('1')
})

resolve方法接收的参数可以分为4中情况

参数是一个Promise实例

如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
参数是一个thenable对象

thenable对象指的是具有then方法的对象，比如下面这个对象。
```
let thenable = {
then: function(resolve, reject) {
	resolve(42);
}
```
Promise.resolve()方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法。
参数不是具有then()方法的对象，或根本就不是对象

如果参数是一个原始值，或者是一个不具有then()方法的对象，则Promise.resolve()方法返回一个新的 Promise 对象，状态为resolved。
不带有任何参数

Promise.resolve()方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。

如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve()方法。

Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

上面代码生成一个 Promise 对象的实例p，状态为rejected，回调函数会立即执行。

Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。

Promise.reject('出错了')
.catch(e => {
  console.log(e === '出错了')
})
// true

上面代码中，Promise.reject()方法的参数是一个字符串，后面catch()方法的参数e就是这个字符串。

本文借鉴的阮一峰 promise入门，这篇文章讲的很详细，有兴趣可以看看

vimin_M

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一篇文章带你了解和使用Promise对象

Promise的理解与使用什么是PromisePromise的特点Promise的基础用法Promise实例化resolve函数传入的是promisePromise.prototype.then()then方法回调函数的参数与返回值Promise.prototype.catch()Promise.all()Promise.racePromise.resolve()Promise.reject()什么是Promisepromise是解决异步编程的一种方案，对比传统的回调函数更加的便捷和强大。Promis
复制链接

扫一扫