深入解析JavaScript与AngularJS中的Promise机制

作者：闭包旅人时间：2026-10-29 21:34:30浏览：431

本文详细解析JavaScript和AngularJS中Promise的工作原理，涵盖Deferred对象的创建与状态管理、resolve与reject的使用、链式调用的实现以及$q.all等核心API，帮助开发者掌握异步编程的最佳实践。

Promise在异步调用中的应用场景

例如，在页面调用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);

处理多个异步方法的挑战

■ 如何处理多个异步方法

如果有多个异步方法需要按顺序执行，例如async1(success, failure)、async2(success, failure)直至asyncN(success, failure)，该如何处理呢？

最直接的做法可能是这样编写代码：


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

上述代码结构较为复杂，难以维护。

我们可以让所有异步方法执行完毕后发出一个通知。


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

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

理解Promise和Deferred的核心概念

■ 什么是Promise和Deferred

Deferred表示异步操作的结果，它提供了显示操作结果和状态的接口，并允许获取与该操作结果相关的Promise实例。Deferred可以改变操作的状态。

Promise提供了一个与相关Deferred进行交互的接口。

当创建一个Deferred时，其状态为pending；当执行resolve方法时，状态变为resolved；当执行reject方法时，状态变为rejected。

我们可以在创建Deferred之后定义回调函数，这些回调函数在接收到resolved或rejected状态提示后开始执行。异步方法无需知晓回调函数的具体操作，只需在状态变为resolved或rejected后通知回调函数即可。

AngularJS中Promise的基本用法

■ 基本用法

→ 创建deferred

var myFirstDeferred = $q.defer();

此时，myFirstDeferred的状态为pending。接下来，当异步方法执行成功时，状态变为resolved；若执行失败，状态则变为rejected。

→ Resolve或Reject这个dererred

假设存在这样一个异步方法：async(success, failure)


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

在AngularJS中，$q的resolve和reject不依赖上下文，大致可以这样编写：

async(myFirstDeferred.resolve, myFirstDeferred.reject);

→ 使用deferred中的promise


var myFirstPromise = myFirstDeferred.promise;

myFirstPromise
  .then(function(data){
  
  }, function(error){
  
  })

一个Deferred可以关联多个Promise。


var anotherDeferred = $q.defer();

anotherDeferred.promise
  .then(function(data){
  
  },function(error){
  
  })
  
//调用异步方法
async(anotherDeferred.resolve, anotherDeferred.reject);

anotherDeferred.promise
  .then(function(data){
  
  }, function(error){
  
  })

如上所述，如果异步方法async成功执行，两个success方法都会被调用。

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


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');
  })

如果只关注success回调函数，该如何编写呢？


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

如果只关注error回调函数，该如何编写呢？


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

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

如果无论回调成功或失败都返回相同的结果，该如何处理？


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

dataPromise.then(finalCallback, finalCallback);

或者

Promise的值链式与错误处理

dataPromise.finally(finalCallback); ■ 值链式

假设有一个异步方法，使用deferred.resolve返回一个值。


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

既然返回的是Promise，我们就可以不断进行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出的值成为每一个链式调用的实参。

Promise链式调用与$q API详解

■ 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');
})

以上就是本文的详细内容，希望对大家学习有所帮助，新年快乐！

作者最新文章

什么时候该用JS构造器：与工厂模式、字面量的选择对比

2026-11-05 16:18:22

推荐几款轻量级JS照片墙开源库及对比

2026-11-05 15:56:19

JavaScript递归写法有哪些常见陷阱及避免方法

2026-11-05 14:53:38

JS数组浅拷贝与深拷贝怎么选？场景与方法总结

2026-11-05 14:41:02

p5.js 中 setup() 和 draw() 函数的执行机制详解

2026-11-05 12:32:38