文章主要涉及关于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
})
