Javascript异步编程的方法介绍-js教程-PHP中文网

Javascript异步编程的方法介绍

零下一度

发布： 2017-07-20 17:11:16

原创

1432人浏览过

在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请求后的数据，再进行其他的操作，这个时候回调函数会帮我们解决这个问题，具体代码如下：

豆包AI编程

豆包推出的AI编程助手

483

查看详情

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();

登录后复制

以上就是Javascript异步编程的方法介绍的详细内容，更多请关注php中文网其它相关文章！