码迷,mamicode.com
首页 > 其他好文 > 详细

async-await

时间:2019-06-12 09:18:19      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:ror   创建   nload   扩展   而不是   冲突   img   要求   console   

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单线程、异步的本质

async-await

标签:ror   创建   nload   扩展   而不是   冲突   img   要求   console   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!