Promise 개요 및 일반적인 방법 소개-JS 튜토리얼-php.cn

Promise 개요 및 일반적인 방법 소개

零下一度

풀어 주다： 2017-07-16 14:46:23

원래의

2164명이 탐색했습니다.

Promise 개요

Promise 개체는 비동기 작업을 위한 통합 인터페이스를 제공하기 위해 CommonJS 작업 그룹에서 제안한 사양입니다.

그럼 약속이란 무엇인가요?

우선 개체입니다. 즉, 다른 JavaScript 개체와 다르지 않게 사용됩니다. 둘째, 비동기 작업과 콜백 함수 사이의 중개자 역할을 하는 프록시 역할을 합니다. 이를 통해 비동기 작업이 동기 작업을 위한 인터페이스를 가질 수 있으므로 프로그램은 일반적인 동기 실행 프로세스를 가지며 콜백 함수는 계층별로 중첩될 필요가 없습니다.

간단히 말하면, 각 비동기 작업은 즉시 Promise 객체를 반환하므로 동기 작업 프로세스를 사용할 수 있습니다. 이 Promises 객체에는 비동기 작업이 완료된 후 호출할 콜백 함수를 지정할 수 있는 then 메서드가 있습니다.

예를 들어 비동기 작업 f1은 Promise 객체를 반환하고 해당 콜백 함수 f2는 다음과 같이 작성됩니다.

(new Promise(f1)).then(f2);

Preface

Promise는 JavaScript 비동기 작업 솔루션으로 최근 블루버드와 같은 프로젝트에서 Promise 라이브러리 클래스를 사용하는 것을 많이 보았습니다. , q, jQuery.Deffered 및 기타 폴리필 약속 방법을 사용하면 긴 문서를 살펴보는 것이 정말 피곤하고 마음에 들지 않습니다.

현재 es5가 개발됨에 따라 Node는 버전 0.12에서 Promise를 지원합니다. 클라이언트 측에서는 대부분의 브라우저가 Promise를 지원하므로 하위 버전 브라우저와 호환되도록 하려면 es5-shim과 같은 폴리필 Promise를 추가하면 됩니다. . 아래에서는 별로 할 말이 없지만 자세한 소개를 살펴보겠습니다.

Usage

Promise 일반적인 시나리오.

비동기 콜백 처리
여러 비동기 함수의 동기 처리
비동기 콜백에 대한 비동기 종속성
통합 입력 방법 캡슐화 또는 오류 처리

1. 비동기 콜백

비동기 콜백을 처리하기 위한 Promise의 기본 사용법입니다.

function Pro1(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve(&#39;pro1&#39;)
  }, 300)
 })
}
//调用
Pro1()
.then(function(data){
 console.log(data) //pro1
})
.catch(function(err){
 throw new Error(err)
})

로그인 후 복사

2. 여러 비동기 함수의 동기 처리

때로는 두 개의 Ajax를 보내고 그들이 데이터를 함께 반환할 수 있기를 바라면 다음 방법을 사용할 수 있습니다.

function Pro1(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve(&#39;pro1&#39;)
  }, 300)
 })
}
function Pro2(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve(&#39;pro2&#39;)
  }, 300)
 })
}
//调用
var Pro = Promise.all([Pro1(), Pro2()]);
Pro
.then(function(data){
 console.log(data[0], data[1]) //Pro1 Pro2
})
.catch(function(err){
 throw new Error(err)
})

로그인 후 복사

3. 비동기 콜백에 대한 비동기 종속성

한 비동기가 다른 비동기의 반환 값에 의존하는 일부 시나리오에서는 다음 사용법을 사용할 수 있습니다.

예: 주문 번호를 사용하여 주문 세부 정보를 비동기적으로 얻은 다음 주문 세부 정보의 제품 ID를 사용하여 제품 세부 정보를 얻습니다.

function Pro1(orderId){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   var orderInfo = {
    orderId: orderId,
    productIds: [&#39;123&#39;, &#39;456&#39;]
   }
   resolve(orderInfo.productIds)
  }, 300)
 })
}
function Pro2(productIds){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   var products = productIds.map(function(productId){
    return {
     productId: productId,
     name: &#39;衣服&#39;
    }
   })
   resolve(products)
  }, 300)
 })
}
//调用

Pro1(&#39;abc123&#39;)
.then(function(productIds){
 console.log(&#39;商品id&#39;,productIds) 
 return Pro2(productIds)
})
.then(function(products){
 console.log(&#39;商品详情&#39;,products) 
})
.catch(function(err){
 throw new Error(err)
})

로그인 후 복사

넷. 통합 입력 방법 또는 오류 처리를 캡슐화합니다.

오류 처리

function ErrorHandler(promiseObj, rejectOrResOrCallback){
 return promiseObj.then(null, function(err){
 if(!err)
 })
}

로그인 후 복사

위 내용은 Promise 개요 및 일반적인 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!