Angularjs Promise 예제에 대한 자세한 설명

Promise는 값을 비동기적으로 처리하기 위한 all, accept 및 기타 친숙한 메서드를 포함하는 생성자입니다. 다음은 예제 코드를 통해 Anglejs Promise에 대한 관련 지식을 설명합니다. 함께 살펴볼까요

1. Promise란 무엇입니까

Promise는 함수에서 발생하는 최종 가능한 반환 값이나 예외를 나타내는 객체로, 값을 비동기적으로 처리하는 데 사용됩니다.

Promise는 값을 비동기적으로 처리하기 위한 all,ject 및 해결 메서드를 포함하는 생성자입니다.

2. Promise를 사용하는 이유

Promise 객체를 사용하면 비동기 작업을 동기 작업 프로세스로 표현할 수 있어 중첩된 콜백 함수 레이어를 피할 수 있습니다. 또한 Promise 객체는 통합 인터페이스를 제공하므로 비동기 작업을 더 쉽게 제어할 수 있습니다.

Promise 객체에는 다음과 같은 2가지 특성이 있습니다.

1. 객체의 상태는 외부 세계의 영향을 받지 않습니다.

Promise 객체는 비동기 작업을 나타내며 보류(진행 중), 해결(완료), 거부(실패)의 세 가지 상태를 갖습니다. 비동기 작업의 결과만 현재 상태를 확인할 수 있으며 다른 작업은 이 상태를 변경할 수 없습니다.

2. 상태가 변경되면 다시 변경되지 않으며 언제든지 이 결과를 얻을 수 있습니다.

Promise 객체의 상태 변경에는 Pending에서 Resolved로, Pending에서 Rejected로 두 가지 가능성이 있습니다. 이 두 가지 상황이 발생하는 한 상태는 굳어져 다시는 변하지 않고 이 결과를 유지할 것입니다.

3. Promise 생성 방법

먼저 코드 조각을 게시합니다.

define([
  'angularModule'
],function (app) {
  app.register.service('httpRequestService', ['$http', '$q', function ($http, $q) {
    return{
      request: function (params) {
        var deferred = $q.defer();
        $http({
          method : params.method,
          url : params.url
        }).success(
          function (data) {
            deferred.resolve(data);
          }
        ).error(
          function(data){
            deferred.reject(data);
          }
        );
        return deferred.promise;
      }
    }
  }])
});

$q 서비스에 대해 이야기해 보겠습니다.

q 서비스는 다음으로 캡슐화되고 구현되는 Promise 구현입니다. AngularJS 자체에서.

지연된 객체를 생성하려면 defer() 메서드를 호출하면 됩니다.

var deferred = $q.defer(); 
//deffered上面暴露了三个方法，以及一个可以用于处理promise的promise属性。 
//promise属性里面又包含了then、catch、finally三个方法

Promise에서는 대기 상태, 완료 상태, 거부 상태의 세 가지 상태가 정의됩니다.

defered API

1.defered object method

1.resolve(value): Resolve() 선언에서 Promise 객체가 보류 상태에서 해결로 변경됨을 나타냅니다.
2.reject(reason): 해결() 선언에서 Promise 객체가 보류 중에서 거부됨으로 변경됨을 나타냅니다.
3.notify(value): inform()이 선언되면 Promise 객체의 미완료 상태를 나타내며, 해결 또는 거부 전에 여러 번 호출할 수 있습니다.

2.defered 객체 속성

promise: 최종적으로 반환되는 것은 원래 지연된 객체가 아닌 새로운 지연된 객체 promise 속성입니다. 이 새로운 Promise 객체는 원래 Promise 객체의 상태만 관찰할 수 있으며 작업 상태가 외부에서 수정되는 것을 방지하기 위해 지연된 객체의 내부 상태를 수정할 수 없습니다.

3.Promise API

Deferred 인스턴스가 생성되면 새로운 Promise 객체가 생성되며 deferred.promise를 통해 참조를 얻을 수 있습니다.

promise 개체의 목적은 지연된 작업이 완료될 때 관심 있는 부분이 실행 결과를 얻을 수 있도록 하는 것입니다.

4. Promise 객체 메서드

1.then(errorHandler,fulledHandler, ProgressHandler): then 메서드는 Promise의 다양한 상태를 모니터링하는 데 사용됩니다. errorHandler는 실패 상태를 모니터링하고,fulfiledHandler는 이행 상태를 모니터링하며, ProgressHandler는 미완료(불완전) 상태를 모니터링합니다. 또한 알림 콜백은 0회 이상 호출될 수 있으며, 해결 또는 거부(해결 및 거부) 전 진행 상황 표시를 제공합니다.

2.catch(errorCallback) - promise.then(null, errorCallback)의 단축어

3.finally(callback) - Promise가 실행되거나 거부되었는지 관찰할 수 있지만 수정이 필요하지 않습니다. 최종 값입니다. 이는 Promise가 거부되거나 해결되었는지 여부에 관계없이 리소스를 해제하거나 사용하지 않는 개체를 정리하는 작업을 수행하는 데 사용할 수 있습니다.

q 일반적으로 사용되는 몇 가지 메서드:

• defer()는 해결, 거부, 알림 등과 같은 여러 일반적인 메서드를 실행할 수 있는 지연된 객체를 생성합니다.

• all()은 Promise 배열에 전달됩니다. , 일괄 실행되면 Promise 객체

• 를 반환합니다.

()가 불확실한 매개변수를 전달하고 Promise 표준을 충족하면 Promise 객체를 반환합니다.

all() 메소드

🎜이 메소드는 특정 메소드를 일괄적으로 실행할 때 사용할 수 있습니다. 모두를 사용하면 여러 비동기 작업을 병렬로 실행하고 단일 콜백에서 모든 반환 데이터를 처리할 수 있습니다. 🎜🎜Promise.all을 사용하여 모두 배열 매개변수를 받고, 내부 값은 결국 Promise 객체로 반환됩니다. 이러한 방식으로 세 개의 비동기 작업이 병렬로 실행되며 모두 실행될 때까지 입력되지 않습니다. 🎜

那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是 下面的results。所以下面代码的输出结果就是：     

  var funcA = function(){
        console.log("funcA");
        return "hello,funA";
      }
      var funcB = function(){
        console.log("funcB");
        return "hello,funB";
      }
      $q.all([funcA(),funcB()])
      .then(function(result){
        console.log(result);
      });

执行的结果：

funcA
funcB
Array [ "hello,funA", "hello,funB" ]

when()方法

when方法中可以传入一个参数，这个参数可能是一个值，可能是一个符合promise标准的外部对象。

      var funcA = function(){
        console.log("funcA");
        return "hello,funA";
      }
      $q.when(funcA())
      .then(function(result){
        console.log(result);
      });

当传入的参数不确定时，可以使用这个方法。

hello,funA

四、链式请求

通过then()方法可以实现promise链式调用,因为then方法总是返回一个新的promise。

runAsync1()
.then(function(data){
  console.log(data);
  return runAsync2();
})
.then(function(data){
  console.log(data);
  return runAsync3();
})
.then(function(data){
  console.log(data);
});
function runAsync1(){
  var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
      console.log('异步任务1执行完成');
      resolve('随便什么数据1');
    }, 1000);
  });
  return p;      
}
function runAsync2(){
  var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
      console.log('异步任务2执行完成');
      resolve('随便什么数据2');
    }, 2000);
  });
  return p;      
}
function runAsync3(){
  var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
      console.log('异步任务3执行完成');
      resolve('随便什么数据3');
    }, 2000);
  });
  return p;      
}

运行结果：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

NodeJS父进程与子进程资源共享原理与实现方法

vue中实现图片和文件上传的示例代码

Vue实现搜索 和新闻列表功能简单范例

위 내용은 Angularjs Promise 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!