文章主要涉及关于 promise 的方法使用, 不会涉及太多理论性的东西, 简单的讲讲它的方法调用, 好废话不多说, 直接看代码
本章涉及以下几点
如何创建一个 Promise 对象
参数讲解
链式调用
catch() 捕捉异常
Promise.all() 方法讲解
Promise.race() 方法讲解
手动的更改状态 Promise.resolve() | Promise.reject()
如何创建 promise 对象
创建一个 promise 对象很简单 直接看代码
- const p1 = new Promise((resolve,reject) => {
- const value = 'hello';
- resolve(value);
- });
像上面这样就简单的创建了一个 promise 对象
参数讲解
- const p1 = new Promise((resolve,reject) => {
- if(true){
- resolve('success')
- }else{
- reject('err')
- }
- });
上面的例子中传了两个参数:
reslove 成功的状态
reject 失败的状态
他们两个执行的方法里都可以传一个值, 即成功传入和失败传入 . 下面我们看下链式调用
链式调用
先看一段代码 :
- const p1 = new Promise((resolve,reject) => {
- const value = 'hello';
- resolve(value); // 此时触发成功
- //reject(value); // 如果是失败 同时我们也传入 value
- });
- p1.then(data => {
- console.log(data); // hello
- return data+'world';
- }, err => {
- console.log(err); // 返回的是 reject(value) 的值
- return err+'err';
- }).then(data => {
- console.log(data); // helloworld 继续上一次 data 的返回值 如果没有 就返回 undefined
- },err => {
- console.log(err); // helloerr 同理 继续返回上一次 err 的返回值
- })
通过代码我们很容易理解它们的作用
catch 捕捉异常
通常我们不会在 then 方法多传入一个参数而是用 catch 来捕捉错误的信息 继续上面的例子
- p1.then(data => {
- console.log(data);
- return data+'world';
- }).catch(err => {
- console.log(err); // hello
- return "reject";
- }).then(data => {
- console.log(data);
- }).catch(err => {
- console.log(err); // reject
- })
Promise.all() 方法
它传入一个 promise 对象的列表 直接看代码
- const arr = [1,2,3,4];
- const promiseArr = arr.map(arg => {
- return new Promise((resolve,reject) => {
- if(arg) {
- resolve(arg*2);
- }else{
- reject('no value');
- }
- })
- });
- Promise.all(promiseArr).then(data => {
- console.log(data); // [2,4,6,8]
- }).catch(err => {
- console.log(err);
- })
Promise.race() 方法
同样的它传入的也是 promise 对象列表 不过他们执行顺序是按照谁快 谁先输出
- const pro1 = new Promise((resolve,reject) => {
- setTimeout(resolve,100,'1');
- });
- const pro2 = new Promise((resolve,reject) => {
- setTimeout(resolve,200,'2');
- });
- const pro3 = new Promise((resolve,reject) => {
- setTimeout(resolve,300,'3');
- });
- const pro4 = new Promise((resolve,reject) => {
- setTimeout(resolve,10,'4');
- });
- Promise.race([pro4,pro1,pro2,pro3]).then(data => {
- console.log(data); // 1 输出最快的那个
- }).catch(err => {
- console.log(err);
- })
两种实例状态
Promise.resolve() | Promise.reject() 两个方法很容易理解 即手动去改变它们的状态:
- const p_1 = Promise.resolve('success');
- p_1.then(data => {
- console.log(data); // success
- })
- const p_2 = Promise.reject('err');
- p_2.then(data => {
- console.log(data);
- }).catch(err => {
- console.log(err); // err
- })
来源: http://www.jianshu.com/p/c8ba9b1ace67