javascript - 关于angular的promise的问题

问题描述

问 题

有一个接口，这个接口的作用是每次更新数据库的一个字段。

在一个循环里，连续发送多次ajax请求，并且需要这多次请求都成功之后，后面做一些事情。

成功的定义是：没有抛出异常，且服务器端返回过来的数据中的 state === "SUCCESS"

请问，如果在 state !== "SUCCESS"即修改不成功的时候，能使$q.all(promises)中的
error回调执行？

例如：

var toModifyAttr = {
  title:"新标题",
  desc:"新描述",
  price:199 // 新价格
}

var promises = [];


for( var attr in toModifyAttr ) {

     var promise = $http( params ).then(function( result ){
     
           if( result.state === "SUCCESS" ) {
           
              console.log("修改"+attr+"属性成功");
            
           }else{
              
              console.log("修改"+attr+"属性失败");
            
          }
       }).catch(function( e ) {
       
           console.log("修改"+attr+"属性失败");
           
           console.log(e);
           
       }) 
       
    promises.push(promise);
   
}

// 保证所有都保存成功。
// 如果没有抛出异常，但是修改失败了，即state不是"SUCCESS"，如何能使error回调执行呢？
$q.all(promises).then(function(){

    console.log('all done!!');
    
    // 下面做一些修改成功之后的工作
    // 移除loading遮罩
    // ...
    // ... 

},function(){
    
    // 这个error回调，如果state!=="SUCCESS"也要执行。如何做到？
    console.log('没有全部成功');  

})

解决方案

这时候你需要的是interceptors，具体做法可以这样：

//新增拦截器：
app.factory('StateInterceptor', function ($q)
{
    return {
        response: function (response)
        {
            if(response.data.state !== 'SUCCESS'){
               return $q.reject(response);
            }
            return response;
        }
    }
});

//配置拦截器给app
app.config(function ($httpProvider)
{
    $httpProvider.interceptors.push('StateInterceptor');
});

然后你的代码可以改成这样：

var toModifyAttr = {
    title: '新标题',
    desc: '新描述',
    price: 199 // 新价格
}

var promises = Object.keys(oModifyAttr).map(key => $http(params));

$q
    .all(promises)
    .then(function() {
        console.log('all done!!');
    // 下面做一些修改成功之后的工作
    // 移除loading遮罩
    // ...
    // ...
    })
    .catch(function() {
        console.log('errors here');
    });

这篇关于javascript - 关于angular的promise的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！