Promise 和async/await 的使用理解
Promise 和async/await 的使用理解
1. new Promise时就会开始执行语句。
new Promise(resolve => resolove('成功信息') ) 简写：Promise.resolve('成功信息');
new Promise((resolve,reject) => reject('错误信息') ) 简写：Promise.reject('错误信息');
2. new Promise中的return data语句没啥用，而要使用resolve或reject
3. new Promise中resolve或reject前后的代码都会先执行
4. Promise中必须使用resolve和reject 这样then方法才会执行，否则不执行。
promise.then(function(value) {
// 对应resolve的值
}, function(error) {
// 对应异常或者reject的值
});
let p1 = new Promise((resolve, reject) => {
//做一些异步操作
setTimeout(() => {
console.log('p1 - 执行完成');
//reject('我是失败');
resolve('我是成功！！');//必须使用resolve，不然后面不会执行
console.log('p1 - 执行完成2');
}, 2000);
});
let p2 = new Promise((resolve, reject) => {
//做一些异步操作
setTimeout(() => {
console.log('执行完成2');
resolve('我是成功2！！');
//return '我是成功！！';
}, 2000);
});
p1.then((data) => {
console.log("1-"+data);
return p2.then((data1) =>{
console.log("p2 -1-"+data1);
return "数据p2";
})
})
.then((data) => {
console.log("2-"+data);
return data;
})
.then((data) => {
console.log("3-"+data);
},(err) => {
console.log('3-rejected',err);
}).catch((err) => {
console.log('finally -rejected',err);
});
5. then中，要返回数据要使用return ；否则后面的then接收到的数据是undefined
then中，return data返回的数据会包装成Promise.resolve(data)继续调用then，后面的then能接收到data
如果没有return语句，那么默认是一个空的Promise.resolve(undefined)，后面的then参数接收到的数据为undefined
then中，return new Promise()，那么会等这个Promise调用完再执行then，即链式调用。
then中，new Promise() 前没有return会异步执行，会立即执行后面的then，而不会等这个Promise执行完。
6. 异常处理，then中的第二个参数是接收错误的，会一步步通过then传下去，也可以用catch接收。
7. Promise.all用法：并行异步执行，所有都执行完
let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})
let p = Promise.all([Promise1, Promise2, Promise3])
p.then(funciton(){
// 三个都成功则成功
}, function(){
// 只要有失败，则失败
})
8. Promise.race的用法：谁跑的快，以谁为准执行回调
//请求某个图片资源
function requestImg(){
var p = new Promise((resolve, reject) => {
var img = new Image();
img.onload = function(){
resolve(img);
}
img.src = '图片的路径';
});
return p;
}
//延时函数，用于给请求计时
function timeout(){
var p = new Promise((resolve, reject) => {
setTimeout(() => {
reject('图片请求超时');
}, 5000);
});
return p;
}
Promise.race([requestImg(), timeout()]).then((data) =>{
console.log(data);
}).catch((err) => {
console.log(err);
});
9. async/await 简化Promise编码
- async/await是写异步代码的新方式，优于回调函数和Promise。
- async返回值是一个promise对象，async 函数内部return语句返回的值，会成为then方法调用函数的参数
- await命令后面跟着的是一个promise对象，如果不是会自动转化为promise对象
- await 关键字必须位于async函数内部
- async/await是基于Promise实现的，它不能用于普通的回调函数。
- async/await与Promise一样，是非阻塞的。
- async/await使得异步代码看起来像同步代码，再也没有回调函数。但是改变不了JS单线程、异步的本质。
//例子1 -Promise
const makeRequest = () => {
return promise1()
.then(value1 => {
return promise2(value1)
.then(value2 => {
return promise3(value1, value2)
})
})
}
//例子1 - 等价的async/await
const makeRequest = async () => {
const value1 = await promise1()
const value2 = await promise2(value1)
return promise3(value1, value2)
}
//例子2 -promise
request("ajaxA")
.then((data)=>{
//处理data
return request("ajaxB")
})
.then((data)=>{
//处理data
return request("ajaxC")
})
.then((data)=>{
//处理data
return request("ajaxD")
})
//例子2-等价的async/await
async function load(){
await request("ajaxA");
await request("ajaxB");
await request("ajaxC");
await request("ajaxD");
}
