优德88app娱乐优德88app娱乐


w88官网

ES 6 promiss

ES6 规定 Promise对象是一个构造函数,用来生成 Promise实列, 如下代码:

var promise = new Promise((resolve, reject) => { if (true) { resolve(value); } else { reject(error); }});

resolve 函数的作用是,将promise对象的状态从 "未完成"(Pending) 变为 “成功”(Resolved), 在异步操作成功调用时,并将异步操作的结果,作为参数传递出去。reject函数的作用是,将promise对象的状态 从 "未完成"(Pending) 变为 "失败"(Rejected), 在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。promise实列生成以后,可以使用then方法分别指定 Resolved状态 和 (Rejected)状态的回调函数。

下面是一个Promise对象的简单列子:

function timeout (ms) { return new Promise ((resolve, reject) => { setTimeout(resolve, ms, "done"); });}timeout(100).then((value) => { console.log(value); // done})

如上代码,timeout函数返回一个Promise对象的实例,过了指定的时间以后,Promise的实例状态变为Resolved,然后触发then指定的回调。参数值就是实例状态变为Resolved传进来的 done,因此输出done。

Promise新建后就会立即执行,如下代码:

const promise = new Promise((resolve, reject) => { console.log("Promise"); resolve();});promise.then(()=> { console.log("Resilved");});console.log("Hi");

输出结果是 Promise  Hi  Resilved done

Promise新建后立即执行,所以首先输出的是 Promise, 然后promise对象resolve方法是异步的,所以先执行完所有同步的方法才会执行resolve中的方法, 因此输出HI,最后输出 Resilved, 最后100ms后,又执行timeout方法,最后输出 done

下面是一个用Promise对象实现的 Ajax 操作的例子。

如下代码:

var getJSON = function(url) { var promise = new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.onreadystatechange = handler; xhr.responseType = "json"; xhr.setRequestHeader("Accept", "application/json"); xhr.send(); function handler() { if (this.readyState !== 4) { return; } if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } } }); return promise;};var url = "http://httpbin.org/get";getJSON(url).then((json) => { console.log(json); // 返回json对象}, (error)=> { console.log(error);});

上面调用resolve函数和reject函数都带有参数,他们的参数会传递给回调函数,reject函数的参数一般是Error对象的实列,表示抛出的错误,resolve函数的参数一般是正常的值,当然还有可能是promise对象的实列。

1-2 理解 Promise.prototype.then()

Promise实例具有then方法,该作用是为Promise实例添加状态改变时的回调函数。该方法的第一个参数是Resolved状态的回调函数,第二个参数是Rejected状态的回调函数。then方法返回的是一个新的Promise实例。因此我们可以采用链式的写法,即then方法后面再调用另一个then方法。如下代码:

getJSON(url).then((json)=>{ console.log(2); console.log(json); // 返回json对象 return json;}).then((data) => { console.log(1); console.log(data); // 返回和上面一样的json对象});

上面的代码使用then方法,使用了2个回调函数,第一个回调函数完成以后,将返回的结果作为参数,传入第二个回调函数。

1-3 理解 Promise.prototype.catch()

Promise.prototype.catch方法是 .then(null, rejection)的别名,用于指定发生错误时的回调函数。如下代码:

getJSON(url).then((json)=> { // ...}).catch((error) => { console.log("发生错误");});

上面代码中,getJSON方法返回一个Promise对象,如果该对象状态变为Resolved, 则会调用then方法的回调函数,如果异步操作抛出错误,状态就会变为 Rejected,就会调用catch方法的回调函数,来处理这个错误。如下是一个发生错误的demo.

var promise2 = new Promise((resolve, reject) => { throw new Error("test");});promise2.catch((error)=> { console.log(error);});// 其实上面的代码和下面的代码是等价的// 写法一var p3 = new Promise((resolve, reject) => { try { throw new Error("test") } catch (e) { reject(e); }});p3.catch((error) => { console.log(error);});// 写法二var p4 = new Promise((resolve, reject) => { reject(new Error("test"));});p4.catch((error) => { console.log(error);});

但是如果Promise状态已经变成 Resolved的话,再抛出错误是没有用的了。如下代码

var p5 = new Promise((resolve, reject) => { resolve("ok"); throws new Error("test"); // 这句无效});p5.then((value) => { console.log(value);}).catch((error)=> { console.log(error);})

上面代码中,在resolve后面再抛出错误是不会被扑获到的,因为Promise的状态一旦改变,就永久保持该状态。Promise对象的错误具有传递性质,它会一直往下传递,直到被catch捕获到为止。

注意: 一般来讲,不要在then方法里面定义Reject状态的回调函数(then的第二个参数),总是使用catch语句。比如如下代码:

// bad的写法 var p6 = new Promise((resolve, reject) => { }); p6.then((data) => { // success }, (error)=>{ // error }); // good的写法 p6.then((data) => { // success }).catch((error) => { // error });

上面的代码中,第二种写法比第一种写法好,第二种写法可以捕获到前面then方法执行中的错误。因此我们建议使用catch方法,而不使用then方法的第二个参数。

1-4 理解Promise.all()方法

Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。如下代码:var P = Promise.all([p1, p2, p3]);该方法接收一个数组作为参数,p1, p2, p3都是Promise的实列,如果他们不是实列的话,会先调用 Promise.resolve方法,将参数转为Promise实例。当p1, p2, p3的状态都变成 fulfilled的时候,p的状态才会变成成功状态。当他们之中有一个是 rejected的话,那么p的状态就变为失败的状态。注意点: 如果作为参数的Promise实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法。如下代码:

const p11 = new Promise((resolve, reject) => { resolve("hello"); }).then(res => res).catch(e => e); const p22 = new Promise((resolve, reject) => { throw new Error("报错了"); }).then(res => res).catch(e=>e); Promise.all([p1, p2]).then(res => console.log(res)).catch(e=>console.log(e));

上面代码中, p11会 resolved, p22首先会rejected,但是p22有自己的catch方法,该方法会返回一个新的Promise的实例,执行完catch方法后,也会变成resolved,导致promise.all方法参数里面的两个实例都会resolved,因此会调用then方法指定的回调函数,不会调用catch方法指定的回调函数。1-5 理解Promise.race()方法

该方法同样是将多个Promise的实例,包装成一个新的Promise实例。var p = Promise.race([p1, p2, p3]);Promise.race 与 Promise.all的相同点:如果不是Promise的实例,就会先调用 Promise.resolve方法,将参数转为Promise的实例。不同点是: 只要p1, p2, p3 其中任何一个实例先改变状态,那么P的状态就会跟着改变。也就是说那个先改变Promise实例的返回值,就传递给P的回调函数。

1-6 理解Promise.resolve()方法

该方法的作用是:可以将现有的对象转为Promise对象。比如如下代码:var jsPromise = Promise.resolve({"a":1});其实上面的代码等价与下面的代码:new Promise(resolve => resolve({"a": 1}));

1-7 理解 Promise.reject()方法

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

var p33 = Promise.reject("出错了"); p33.then(null, (s) => { console.log(s); // 出错了 });

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

欢迎阅读本文章: 何鹏

w88优德官网

w88官网