async-await

Posted 2022-01-04 wzndkj

async，await和promise并不冲突，可以是promise的扩展

1、then只是将callback拆分了(以前callbak的也是函数，只不过后面可以拆分了，组件化了)

 

function waitHandle()
　　var dtd = $.Deferred(); // 创建一个deferred对象

　　var wait = function(dtd) // 要求传入一个 deferred对象
　　　　var task = function()
　　　　　　console.log(‘执行完成‘);
　　　　　　dtd.resolve(); // 表示异步任务已经完成
　　　　　　// dtd.reject(); // 表示异步任务失败或出错
　　　　
　　　　setTimeout(task, 2000);
　　　　return dtd.promise(); // 这里返回promise，而不是直接反悔deferred
　　

　　// 注意，这里一定要有返回值
　　return wait(dtd);


var w = waitHandle();
w.then(function()
　　console.log(‘ok1‘)
,function()
　　console.log(‘error1‘)
).then(function()
　　console.log(‘ok2‘)
,function()
　　console.log(‘error2‘);
)

 

 

2、aysnc/await是最直接的同步写法（执行的顺序跟写法一样）

 

import ‘babel-polyfill‘;
function loadImg(src) 
　　const promise = new Promise(function (resolve, reject) 
　　　　var img = document.createElement(‘img‘);
　　　　img.onload = function()
　　　　　　resolve(img);
　　　　
　　　　img.onerror = function()
　　　　　　reject();
　　　　
　　　　img.src = src;
　　)
　　return promise;


const load = async function()
　　const result1 = await loadImg(‘xxx.png‘);
　　console.log(result1);
　　const result2 = await loadImg(‘yyy.png‘);
　　console.log(result2);

load();

 

用法

1、使用await，函数必须用async标识

2、await后面跟的是一个Promise实例

3、需要babel-polyfill(兼容的意思)

npm i --save-dev babel-polyfill

 

总结

1、使用了Promise,并没有和Promise冲突

2、完全是同步的写法，再也没有回调函数

3、但是：改变不了js单线程、异步的本质