javascript基本对象应用(JavascriptPromise对象基础)

兼容性

javascript基本对象应用(JavascriptPromise对象基础)(1)

promise兼容性

一、Promise 的状态

Promise有3种状态:

  1. Pending:进行中
  2. Resolved(Fulfilled):已完成
  3. Rejected:已失败

Promise状态的改变只有两种:

  1. Pending --> Resolved
  2. Pending --> Rejected

这意味着,一个Promise对象resolve之后,状态就一直停留在Resolved那里了,反过来reject也一样。

这种特点的结果是,Promise对象的状态改变之后,你再给它添加回调函数,这个函数也会执行。

这跟事件监听器很不一样 —— 你一旦错过某个事件,就没办法再捕获他了,除非这个事件再次发生。

二、 .then() 和 .catch()

Promise构造器接受一个函数作为参数,这个函数有两个参数:resolve,reject,分别代表这个Promise实例成功之后的回调函数和失败之后的回调函数。

举个例子:

var promise = new Promise(function (resolve, reject) { var a = 1 if (a == 1) { resolve(a) } else { reject(error) } }) promise.then(function (value) { console.log(value); }).catch(function (error) { console.log(error); }) // 输出: // 1

不管是then方法还是catch方法返回的都是一个新的Promise实例,这意味着Promise可以链式调用then和catch,每一个方法的返回值作为下一个方法的参数:

var promise = new Promise(function (resolve, reject) { var a = 1 if (a === 1) { resolve(a) } else { reject(error) } }) promise.then(function (value) { console.log(value ) return value }).catch(function (error) { console.log(error) }).then(function (value) { console.log(value ) }) // 输出: // 1 // 2

如果其中一个then失败了,它后面第一个catch方法就会接受这个错误并执行,然后继续执行后面的方法,比如:

javascript基本对象应用(JavascriptPromise对象基础)(2)

三、 Promise.resolve() 和 Promise.reject()

两者都是是new promise()的快捷方式。

Promise.resolve(value)是下面代码的语法糖:

new Promise(function (resolve) { resolve(value) })

所以

Promise.resolve(42).then(function(value){ console.log(value); }); // 等同于 var promise = new Promise(function (resolve) { resolve(42) }) promise.then(function (value) { console.log(value) })

Promise.reject(value)是下面代码的语法糖:

new Promise(function(resolve,reject){ reject(new Error("出错了")); });

四、 Promise.all() 和 Promise.race()

1. Promise.all()

接收一个Promise对象的数组作为参数,当这个数组里的所有Promise对象全部变为resolve的时候,该方法才resolve。

如果其中一个Promise对象为reject的话,则该方法为reject。

比如:

javascript基本对象应用(JavascriptPromise对象基础)(3)

2. Promise.race()

使用方法和Promise.all一样,接收一个Promise对象数组为参数。

只要其中一个Promise对象变为Resolved或者Rejected状态,该方法返回,进行后面的处理。

看例子:

javascript基本对象应用(JavascriptPromise对象基础)(4)

五、 用Promise封装AJAX代码

原生的AJAX代码真的是又臭又长了,可以用Promise把它们封装起来,每次使用只需要调用一下封装好的函数就可以了:

javascript基本对象应用(JavascriptPromise对象基础)(5)

之后想要使用AJAX,只需要一个简单的get()函数就可以搞定啦!

有一个地方需要注意的是,在get()函数里面调用了req.onload,之前为什么这里不使用req.onreadystatechange呢?

上面已经说过,Promise的状态的改变是单向的,一次性的,一旦改变,状态就会凝固了,而我们代码中判断状态的片段是这样的:

if (req.readyState == 4 && req.status == 200) { resolve(req.response) } else { reject(Error(req.statusText)) }

我们在if...else语句中改变了Promise的状态,也就是req.onreadystatechange只会被调用一次。那么如果用req.onreadystatechange的话,会出现什么结果呢?

我们永远只能得到error~因为req的state一旦改变,req.onreadystatechange就会被调用,所以我们永远只能捕捉到req的state为2的时候!

不得不说Promise真的很有趣!

作者:Lxylona

链接:https://www.jianshu.com/p/82237a7ca6e5

来源:简书

简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页