ES6 - Promise对象 - 代码天地

Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。

Promise对象来说，它也有三种状态：
1.pending
初始状态,也称为未定状态，就是初始化Promise时，调用executor执行器函数后的状态。
2.fulfilled
完成状态，意味着异步操作成功。
3.rejected
失败状态，意味着异步操作失败。

它只有两种状态可以转化，即：
操作成功resolve()
pending -> fulfilled
操作失败reject()
pending -> rejected

创建一个Promise实例：

let pro = new Promise( (resolve,reject) => {
	if(成功条件){
		resolve('succees data'); //resolve函数里面的参数，是当使用链式操作函数then时能获取到
	}else{ // 失败条件
		reject('fail data');//reject函数里面的参数，是当使用链式操作函数catch时能获取到
	}
});

实例化后的Promise对象pro可以进行链式调用，而且这个then()方法可以接收两个函数作为参数，一个是处理成功后的函数，一个是处理错误结果的函数。

//第一种写法
pro.then((data) => {
//处理成功后的操作
}, (err) => {
//处理失败后的操作
});

catch()方法和then()方法一样，都会返回一个新的Promise对象，它主要用于捕获异步操作时出现的异常。因此，我们通常省略then()方法的第二个参数，把错误处理控制权转交给其后面的catch()函数。

let pro1 = new Promise( (resolve,reject) => {
	reject('出错了'); //人为置为失败，返回一个rejected的Promise实例
});
pro1.then( (data) => { //因为上面人为置为失败了，所以then不执行
	console.log("这里是异步操作成功后执行的");
}).catch( (err) =>{
	console.log("这里是异步操作失败后执行的:" + err);
});

//最后输出了：
// 这里是异步操作失败后执行的:出错了

Promise实例对象为一个函数的用法：

let ajax = (num) => {
	return new Promise ( (resolve,reject) => {
	 	if (num > 5){
	 		resolve("大于5");
	 	}else {
	 		reject("不大于5");
	 	}
	})
}

//Promise对象的链式操作
ajax(6).then( (data) => {
	console.log(data);
}).catch( (err) => {
	console.log(err);
});

//最后输出：
// 大于5

如果有若干个异步任务，需要先做任务1,如果成功，再做任务2，如果中间任何一个任务失败，才不继续进行执行处理函数。
我们需要串行执行这样的异步任务，就可以写成：（其实就是在then方法中再返回一个Promise实例对象，然后后面就能继续使用then方法进行串行执行任务了。）

let dataJson = {a:1,b:2}
let ajax = () => {
	return new Promise ( (resolve,reject) => {
	 	resolve(dataJson);
	})
}

//Promise对象的链式操作
ajax().then( (data) => {
	console.log(data);
	//返回一个Promise实例，方便后面可以继续使用链式操作then和catch
	return new Promise( (resolve,reject) => {
		resolve(22);
	});
	//等价于
	// return Promise.resolve(22);
}).catch( (err) => {
	console.log(err);
}).then( (data2) => { //因为上面又返回了Promise实例，所以还可以使用链式操作
	console.log(data2);
});

//最后输出：
// {a:1,b:2}
// 22

返回的这个Promise对象的状态主要是根据Promise实例.then()方法返回的值，大致分为以下几种情况：
1、如果then()方法中返回了一个参数值，那么返回的Promise将会变成接收状态(fulfilled)。
2、如果then()方法中抛出了一个异常，那么返回的Promise将会变成拒绝状态(rejected)。
3、如果then()方法调用resolve()方法，那么返回的Promise将会变成接收状态。
4、如果then()方法调用reject()方法，那么返回的Promise将会变成拒绝状态。
5、如果then()方法返回了一个未知状态(pending)的Promise新实例，那么返回的新Promise就是未知状态。
6、如果then()方法没有明确指定的resolve(data)/reject(data)/return data时，那么返回的新Promise就是接收状态，可以一层一层地往下传递。

例子如下：

let promise2 = new Promise( (resolve, reject) => {
  // 置为接收状态
  resolve('success');
});

promise2
  .then((data) => {
    // 上一个then()调用了resolve，置为接收状态fulfilled
    console.log('第一个then'); //第一个then
    console.log(data);  // success
    return '2';
  })
  .then((data) => {
    // 此时这里的状态也是fulfilled, 因为上一步返回了一个参数值2
    console.log('第二个then'); //第二个then
    console.log(data);  // 2

    // 返回一个rejected的Promise实例
    return Promise.reject("把状态置为rejected error");
    
  }, (err) => { //then的第二个函数是捕获错误而执行的
    // error
  })
  .then((data) => {
    /* 这里不运行，因为上一步调用reject()方法，那么返回的Promise将会变成拒绝状态 */
    console.log('第三个then');
    console.log(data);
    
  }, (err) => {//then的第二个函数是捕获错误而执行的
    // 此时这里的状态是rejected, 因为上一步使用了reject()来返回值
    console.log('出错：' + err); // 出错：把状态置为rejected error
  })
  .then((data) => {
    // 没有明确指定返回值，默认返回fulfilled (如果后面还有then那么就会是接收状态)
    console.log('这里是fulfilled态'); //这里是fulfilled态
})
//最后输出：
// 第一个then
// success
// 第二个then
// 2
// 出错：把状态置为rejected error
// 这里是fulfilled态

ES6 - Promise对象

猜你喜欢