>

详解Javacript和AngularJS中的Promises

- 编辑:正版管家婆马报彩图 -

详解Javacript和AngularJS中的Promises

举个例子说页面调用google地图的api时就应用到了promise。

 

function success(position){
  var cords = position.coords;
  console.log(coords.latitude + coords.longitude);
}

function error(err){
  console.warn(err.code+err.message)
}

navigator.geolocation.getCurrentPosition(success, error);

promise是Javascript异步编制程序很好的施工方案。对于一个异步方法,推行四个回调函数。

■ 如何管理八个异步方法

举个例子说页面调用google地图的api时就应用到了promise。

假使有那一个异步方法须求按序执可以吗?async1(success, failure), async2(success, failure), ...asyncN(success, failure),该怎样管理呢?

 

最简便易行的,恐怕会如此写:

function success(position){
    var cords = position.coords;
    console.log(coords.latitude + coords.longitude);
}

function error(err){
    console.warn(err.code+err.message)
}

navigator.geolocation.getCurrentPosition(success, error);
async1(function(){
  async2(function(){
    ...
    asyncN(null, null);
    ...
  }, null)
}, null)

 

上述的代码是相比难保险的。

■ 怎样管理八个异步方法

我们可以让全数的异步方法实践完成后出来一个通告。

设若有成都百货上千异步方法需求按序执行吗?async1(success, failure), async2(success, failure), ...asyncN(success, failure),该怎么着管理啊?

var counter = N;
function success(){
  counter--;
  if(counter === 0){
    alert('done');
  }
}

async1(success);
async2(success);
...
asyncN(success);

最简便易行的,恐怕会这么写:

■ 什么是Promise和Deferred

 

deferred表示异步操作的结果,提供了八个出示操作结果和景观的接口,并提供了叁个能够猎取该操作结果相关的promise实例。deferred是能够转移操作情形的。

async1(function(){
    async2(function(){
        ...
        asyncN(null, null);
        ...
    }, null)
}, null)

promise提供了三个用以和有关deferred交互的接口。

 

当成立四个deferred,相当于叁个pending状态;
当试行resolve方法,也正是二个resolved状态。
当施行reject方法,约等于四个rejected状态。

以上的代码是比较难保险的。

我们得以在成立deferred之后,定义回调函数,而回调函数在获得resolved和rejected的意况提示后初叶实践。异步方法没有须求通晓回调函数如何操作,只供给在取得resolved或rejected状态后通报回调函数早先实施。

咱俩可以让具备的异步方法施行达成后出来一个布告。

■ 基本用法

 

→ 创建deferred

var counter = N;
function success(){
    counter--;
    if(counter === 0){
        alert('done');
    }
}

async1(success);
async2(success);
...
asyncN(success);

var myFirstDeferred = $q.defer();

 

此地,对于myFirstDeferred这一个deferred,状态是pending,接下去,当异步方法施行成功,状态形成resolved,当异步方法实施倒闭,状态成为rejected。

■ 什么是Promise和Deferred

→ Resolve或Reject这个dererred

deferred表示异步操作的结果,提供了二个显得操作结果和情景的接口,并提供了一个足以获得该操作结果相关的promise实例。deferred是可以改动操作情形的。

要是有那样的五个异步方法:async(success, failure) 

promise提供了三个用于和相关deferred交互的接口。

async(function(value){
  myFirstDeferred.resolve(value);
}, function(errorReason){
  myFirstDeferred.reject(errorReason);
})

当创制三个deferred,也就是二个pending状态;
当实践resolve方法,也正是二个resolved状态。
当施行reject方法,约等于二个rejected状态。

在AngularJS中,$q的resolve和reject不正视上下文,大概可以这样写:

我们得以在制造deferred之后,定义回调函数,而回调函数在获取resolved和rejected的情景提醒后先河实施。异步方法不须求通晓回调函数怎么着操作,只需求在获得resolved或rejected状态后通报回调函数初步进行。

async(myFirstDeferred.resolve, myFirstDeferred.reject);

■ 基本用法

→ 使用deferred中的promise

→ 创建deferred

var myFirstPromise = myFirstDeferred.promise;

myFirstPromise
  .then(function(data){

  }, function(error){

  })

var myFirstDeferred = $q.defer();

deferred能够有四个promise.

那边,对于myFirstDeferred这几个deferred,状态是pending,接下去,当异步方法实行成功,状态成为resolved,当异步方法试行破产,状态变为rejected。

var anotherDeferred = $q.defer();

anotherDeferred.promise
  .then(function(data){

  },function(error){

  })

//调用异步方法
async(anotherDeferred.resolve, anotherDeferred.reject);

anotherDeferred.promise
  .then(function(data){

  }, function(error){

  })

→ Resolve或Reject这个dererred

如上,若是异步方法async成功施行,七个success方法都会被调用。

尽管有那样的八个异步方法:async(success, failure)

→ 日常把异步方法包裹到三个函数中

 

function getData(){
  var deferred = $q.defer();
  async(deferred.resolve,deferred.reject);
  return deferred.promise;
}

//deferred的promise属性记录了达到resolved, reject状态所需要执行的success和error方法
var dataPromise = getData();
dataPromise
  .then(function(data){
    console.log('success');
  }, function(error){
    console.log('error');
  })
async(function(value){
    myFirstDeferred.resolve(value);
}, function(errorReason){
    myFirstDeferred.reject(errorReason);
})

若是只关怀success回调函数该怎么写啊?

 

dataPromise
  .then(function(data){
    console.log('success');
  })

在AngularJS中,$q的resolve和reject不借助上下文,大概能够如此写:

借使只关切error回调函数该怎样写吗?

async(myFirstDeferred.resolve, myFirstDeferred.reject);

dataPromise
  .then(null, function(error){
    console.log('error');
  })

或

dataPromise.catch(function(error){
  console.log('error');
})

→ 使用deferred中的promise

举例任由回调成功或倒闭都回到相同的结果吗?

var myFirstPromise = myFirstDeferred.promise;

myFirstPromise
    .then(function(data){

    }, function(error){

    })
var finalCallback = function(){
  console.log('不管回调成功或失败都返回这个结果');
}

 

dataPromise.then(finalCallback, finalCallback);

deferred能够有四个promise.

 

dataPromise.finally(finalCallback);
■ 值链式

var anotherDeferred = $q.defer();

anotherDeferred.promise
    .then(function(data){

    },function(error){

    })

//调用异步方法
async(anotherDeferred.resolve, anotherDeferred.reject);

anotherDeferred.promise
    .then(function(data){

    }, function(error){

    })

要是有贰个异步方法,使用deferred.resolve重临一个值。

 

function async(value){
  var deferred = $q.defer();
  var result = value / 2;
  deferred.resolve(result);
  return deferred.promise;
}

上述,倘使异步方法async成功推行,多个success方法都会被调用。

既然再次回到的是promise,大家就足以持续then, then下去的。

→ 常常把异步方法包裹到一个函数中

var promise = async(8)
  .then(function(x){
    return x+1;
  })
  .then(function(x){
    return x*2;
  })

promise.then(function(x){
  console.log(x);
}) 

 

上述,resolve出的值成为每二个链式的实参。

function getData(){
    var deferred = $q.defer();
    async(deferred.resolve,deferred.reject);
    return deferred.promise;
}

//deferred的promise属性记录了达到resolved, reject状态所需要执行的success和error方法
var dataPromise = getData();
dataPromise
    .then(function(data){
        console.log('success');
    }, function(error){
        console.log('error');
    })

■ Promise链式

 

function async1(value){
  var deferred = $q.defer();
  var result = value * 2;
  deferred.resolve(result);
  return deferred.promise;
}

function async2(value){
  var deferred = $q.defer();
  var result = value + 1;
  deferred.resolve(result);
  return deferred.promise;
}

var promise = async1(10)
  .then(function(x){
    return async2(x);
  })

promise.then(function(x){
  console.log(x);
}) 

假诺只关怀success回调函数该怎么着写吧?

理之当然一种更易读的写法是:

dataPromise
    .then(function(data){
        console.log('success');
    })
function logValue(value){
  console.log(value);
}

async1(10)
  .then(async2)
  .then(logValue);

 

async1方法的再次回到值成为then方法中的success方法中的实参。

若果只关注error回调函数该如何写吧?

倘使从捕获格外的角度,仍是可以那样写:

dataPromise
    .then(null, function(error){
        console.log('error');
    })

或

dataPromise.catch(function(error){
    console.log('error');
})
async1()
  .then(async2)
  .then(async3)
  .catch(handleReject)
  .finally(freeResources);

 

■ $q.reject(reason)   

如若听由回调成功或停业都回来同样的结果吧?

采取该方式能够让deferred显示error状态,并交付八个涌出error的理由。

var finalCallback = function(){
    console.log('不管回调成功或失败都返回这个结果');
}

dataPromise.then(finalCallback, finalCallback);

或

dataPromise.finally(finalCallback);
var promise = async().then(function(value){
  if(true){
    return value;
  } else {
    return $q.reject('value is not satisfied');
  }
})

■ 值链式

■ $q.when(value)

假若有叁个异步方法,使用deferred.resolve重回叁个值。

回去一个promise并带上值。

function async(value){
    var deferred = $q.defer();
    var result = value / 2;
    deferred.resolve(result);
    return deferred.promise;
}
function getDataFromBackend(query){
  var data = searchInCache(query);
  if(data){
    return $q.when(data);
  } else {
    reutrn makeAasyncBackendCall(query);
  }
}

 

■ $q.all(promisesArr)

既是重临的是promise,大家就足以不停then, then下去的。

伺机全部promise实行到位。

var promise = async(8)
    .then(function(x){
        return x+1;
    })
    .then(function(x){
        return x*2;
    })

promise.then(function(x){
    console.log(x);
})  
var allPromise = $q.all([
  async1(),
  async2(),
  ...
  asyncN();
])

allProise.then(function(values){
  var value1 = values[0],
    value2 = values[1],
    ...
    valueN = values[N];

  console.log('all done');
})

以上,resolve出的值成为每贰个链式的实参。

以上正是本文的详实内容,希望对大家学习抱有扶助,大年开心!

■ Promise链式

你可能感兴趣的稿子:

  • AngularJS中的promise用法剖析
  • AngularJS中update五回面世$promise属性无法分辨的缓和措施
  • AngularJS中的Promise详细介绍及实例代码
  • AngularJS 中的Promise --- $q劳动详解
  • AngularJS中拍卖多少个promise的措施
  • Angularjs Promise实例详解

 

function async1(value){
    var deferred = $q.defer();
    var result = value * 2;
    deferred.resolve(result);
    return deferred.promise;
}

function async2(value){
    var deferred = $q.defer();
    var result = value + 1;
    deferred.resolve(result);
    return deferred.promise;
}

var promise = async1(10)
    .then(function(x){
        return async2(x);
    })

promise.then(function(x){
    console.log(x);
}) 

 

自然一种更易读的写法是:

function logValue(value){
    console.log(value);
}

async1(10)
    .then(async2)
    .then(logValue);

 

async1主意的重临值成为then方法中的success方法中的实参。

万一从捕获相当的角度,还足以这么写:

async1()
    .then(async2)
    .then(async3)
    .catch(handleReject)
    .finally(freeResources);

 

■ $q.reject(reason)    

利用该措施能够让deferred显示error状态,并付出三个面世error的说辞。

var promise = async().then(function(value){
    if(true){
        return value;
    } else {
        return $q.reject('value is not satisfied');
    }
})

 

■ $q.when(value)

回到二个promise并带上值。

function getDataFromBackend(query){
    var data = searchInCache(query);
    if(data){
        return $q.when(data);
    } else {
        reutrn makeAasyncBackendCall(query);
    }
}

 

■ $q.all(promisesArr)

等候全数promise实践到位。

var allPromise = $q.all([
    async1(),
    async2(),
    ...
    asyncN();
])

allProise.then(function(values){
    var value1 = values[0],
        value2 = values[1],
        ...
        valueN = values[N];

    console.log('all done');
})

 

本文由网络计算发布,转载请注明来源:详解Javacript和AngularJS中的Promises