Vue教程(四十七)Promise基本介绍与使用
什么是Promise
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
-
Promise对象有以下两个特点:
-
对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:
pending(进行中)、fulfilled(已成功)和rejected(已失败)
。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。 -
一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从
pending(进行中)
变为
fulfilled(已成功)
和从
pending(进行中)
变为
rejected(已失败)
。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为
resolved(已定型)
。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
-
对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:
-
Promise对象缺点:
首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
Promise基本使用
ES6 规定,
Promise
对象是一个构造函数,并且传入两个参数:
resolve
和
reject
,分别表示异步执行成功后的回调函数和异步执行失败后的回调函数。
通过
promise.then()
处理返回结果。这里的
promise
指的是 Promise 实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Promise 的基本用法</title>
</head>
<body>
<script type="text/javascript">
const asyncFun = () => {
// 第一步:服务端的接口封装
let promise = new Promise((resolve, reject) => {
// 这里做异步任务(比如 ajax 请求接口,这里暂时用定时器代替)
setTimeout(() => {
// 接口返回的数据
const random = Math.floor(Math.random() * 2 ) + 200;
const data = { code: random, msg:'hello world' }
if (data.code === 200) {
// 接口请求成功时调用
resolve(data)
} else {
// 接口请求失败时调用
reject({ code: 500, msg: 'network error' })
}
}, 1000)
})
// 第二步:业务层的接口调用。这里的 res 就是 从 resolve 和 reject 传过来的,也就是从接口拿到的数据
.then(res => {
// 从 resolve 获取正常结果
console.log(res)
})
.catch(res => {
// 从 reject 获取异常结果
console.log(res)
})
return promise
}
asyncFun()
</script>
</body>
</html>
执行结果:
上方代码中,当从接口返回的数据data.code的值不同时,可能会走 resolve,也可能会走 reject,这个由你自己的业务决定,上面代码使用随机数。
– 以上为《Vue教程(四十七)Promise基本介绍与使用》,如有不当之处请指出,我后续逐步完善更正,大家共同提高。谢谢大家对我的关注。
——厚积薄发(yuanxw)