在javascript开发过程中，我们不可避免的会遇到一些异步编程的情景，无论是前端的ajax请求还是，node的各种异步api，下文是在工作学习过程中总结的关于javascript异步编程集中常见方式用法的总结
javascript异步编程的几种方法
目前工作中用的比较多的异步模式编程有如下几种方法
一 回调函数
这是异步编程最基本的方法，假设有两个函数f1和f2，后者等待前者的执行结果
f1();f2();
如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数
function f1(callback){ setTimeout(function(){
// f1的任务代码
//执行回调函数 callback() },1000)}执行代码就变成下面这样：f1(f2);//调用
立即学习“Java免费学习笔记（深入）”；
采用这种方式，我们把同步操作变成了异步操作，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();
