async-await

时间:2019-06-12
本文章向大家介绍async-await,主要包括async-await使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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单线程、异步的本质

原文地址:https://www.cnblogs.com/wzndkj/p/11007391.html