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"); }