javascript异步编程的几种方法

目前工作中用的比较多的异步模式编程有如下几种方法

一 回调函数

这是异步编程最基本的方法，假设有两个函数f1和f2，后者等待前者的执行结果

f1();f2();
如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数
function f1(callback){ setTimeout(function(){ 
// f1的任务代码 
//执行回调函数 callback() },1000)}执行代码就变成下面这样：

f1(f2);//调用

采用这种方式，我们把同步操作变成了异步操作，f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行

具体例子：

由于ajax请求是异步的，有时候我们需要得到ajax请求后的数据，再进行其他的操作，这个时候回调函数会帮我们解决这个问题，具体代码如下：

import $ from 'jquery'function getData(callback){ var url="http://xxx.com/activity/v1/homepage/index"; var data={ "cityId":110100, "type":"coupon"
 }
 $.ajax({
 url:url,
 type:'get',
 dataType:'jsonp',
 jsonp:'callback',
 data:data,
 success:function(resp){ if(resp.status==200 && resp.data){ var item = resp.data[0] && resp.data[0].coupon; if(callback){
 callback(item) //执行回调函数 }
 }
 },
 error:function(err){
 console.log("error")
 }
 })
}function getItem(data){ if(data){ //得到数据进行处理
 var url = data.moreUrl;
 alert(url)
 }
}
 getData(getItem) //调用二 发布／订阅 模式

我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。

这个模式有多种实现，下面采用的是Ben Alman的Tiny Pub/Sub，这是jQuery的一个插件。

function PubSub(){ this.handlers = {};
}
PubSub.prototype = {
 on:function(eventType,handler){ var self = this; if(!(eventType in self.handlers)){
 self.handlers[eventType] = [];
 }
 self.handlers[eventType].push(handler); return this;
 },
 trigger:function(eventType){ var self = this; var handlerArgs = Array.prototype.slice.call(arguments,1); for(var i=0;i<self.handlers[eventType].length;i++){
 self.handlers[eventType][i].apply(self,handlerArgs)
 } return self;
 }
}

具体调用：

var pubsub=new PubSub();function getData(){ var url="xxx.com/activity/v1/homepage/index"; 
var data={ "cityId":110100, "type":"coupon"
 }
 $.ajax({
 url:url,
 type:'get',
 dataType:'jsonp',
 jsonp:'callback',
 data:data,
 success:function(resp){ if(resp.status==200 && resp.data){ 
 var item = resp.data[0] && resp.data[0].coupon;
 pubsub.trigger('done',item) //发布事件 }
 },
 error:function(err){
 console.log("error")
 }
 })
}//订阅事件pubsub.on('done',function(data){
 getItem(data)
})function getItem(data){
 alert('start')
 console.log('data='+data) if(data){ //得到数据进行处理
 var url = data.moreUrl;
 alert(url)
 }
}
 getData() //调用

三 Promise对象

Promise 对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口

结合es7提供的async和await使用，代码如下：

import $ from 'jquery'function getData()
{ return new Promise((resolve,reject) => { 
var url="http://xxx.com/activity/v1/homepage/index"; 
var data={ "cityId":110100, "type":"coupon" } 
$.ajax({ url:url, type:'get', dataType:'jsonp', 
jsonp:'callback', data:data, success:function(resp){ 
if(resp.status==200 && resp.data){ var item = resp.data[0] && resp.data[0].coupon; 
resolve(item) } }, 
error:function(err){ reject("error") } }) })}
function getItem(data){ if(data){ //得到数据进行处理 
var url = data.moreUrl; alert(url) }}
const testAsync = async () => { var data = await getData(); getItem(data); }
//调用testAsync();