Javascript 비동기 프로그래밍 방법 소개

JavaScript 개발 과정에서 프런트엔드 Ajax 요청이든 Node의 다양한 비동기 API이든 필연적으로 몇 가지 비동기 프로그래밍 시나리오를 접하게 됩니다. 다음은 작업 중 JavaScript의 일반적인 비동기 프로그래밍을 요약한 것입니다. 메소드 사용법 정리

자바스크립트에서 비동기 프로그래밍의 여러 방법

현재 업무에서 많이 사용하는 비동기 모드 프로그래밍에는 다음과 같은 메소드가 있습니다

콜백 함수가 하나

가장 기본적인 비동기 프로그래밍 방법입니다. . f1과 f2라는 두 가지 함수가 있다고 가정합니다. 후자는 이전

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

f1(f2);//Call

의 실행 결과를 기다립니다. 이런 식으로 동기 작업을 비동기 작업으로 전환합니다. 작업, f1은 프로그램 실행을 차단하지 않습니다. 프로그램의 기본 논리를 먼저 실행하고 시간이 많이 걸리는 작업의 실행을 연기합니다. 이때 콜백 함수는 이 문제를 해결하는 데 도움이 됩니다.

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) //调用二 发布／订阅 模式

특정 작업이 완료되면 "신호 센터"가 있다고 가정합니다. 신호는 신호 센터에 "게시"되며, 다른 작업은 신호 센터에 신호를 "게시"할 수 있습니다. 이 신호를 구독하면 언제 실행을 시작할 수 있는지 알 수 있습니다. 이를 "게시-구독 패턴"(게시-구독 패턴)이라고 하며 "관찰자 패턴"(관찰자 패턴)이라고도 합니다.

이 패턴의 구현은 다양합니다. 아래는 jQuery용 플러그인인 Ben Alman의 Tiny Pub/Sub입니다.

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 및 Wait와 함께 사용되며 코드는 다음과 같습니다. 다음과 같습니다:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!