处理返回承诺或空值的函数

Question

I have defined a function as following :

function getCurrentComponent(){
    if($rootRouter._currentInstruction){
        return $rootRouter.recognize($rootRouter._currentInstruction.urlPath).then(function (data) {
            return data.component.componentType;
        });
    }else{
        return null;
    }
}

To call this function I did as following :

factory.getCurrentComponent().then(function (data) {
    ...
});

The problem is when the getCurrentComponent function returns a null value, the following error is generated :

Cannot read property 'then' of null

How can I solve this ?

Edit:

I forgot to say that I'm limited to use ES5, so I can't work with the object Promise

Answer 1

Use Promise.reject() function.

function getCurrentComponent() {
  if ($rootRouter._currentInstruction) {
    return $rootRouter.recognize($rootRouter._currentInstruction.urlPath).then(function(data) {
      return data.component.componentType;
    });
  } else {
    return Promise.reject('_currentInstruction is fale');
  }
}

factory.getCurrentComponent().then(function(data) {
  ...
}).catch(function(e) {
  console.log(e); // Output: _currentInstruction is fale
});

Resource

• Promise.reject()

---

If you're unable to use Promise you can return an object with a function then .

function getCurrentComponent() {
  if ($rootRouter._currentInstruction) {
    return $rootRouter.recognize($rootRouter._currentInstruction.urlPath).then(function(data) {
      return data.component.componentType;
    });
  } else {
    var helperThen = { then: function(fn) { fn(null) } };
    return helperThen;
  }
}

factory.getCurrentComponent().then(function(data) {
  // Check if data is null.
  ...
});

Answer 2

I cant use the object Promise in ES5.

Use the AngularJS $q Service :

function getCurrentComponent(){
    if($rootRouter._currentInstruction){
        return $rootRouter.recognize($rootRouter._currentInstruction.urlPath).then(function (data) {
            return data.component.componentType;
        });
    }else{
        ̶r̶e̶t̶u̶r̶n̶ ̶n̶u̶l̶l̶;̶
        return $q.reject(null);
    }
}

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

The $q Service is a Promises/A+ -compliant implementation of promises/deferred objects thst is integrated with the AngularJS framework and its digest cycle.

Answer 3

Convert the function to use a Promise .

function getCurrentComponent(){
    return new Promise((resolve, reject)=>{
      if($rootRouter._currentInstruction){
          resolve( $rootRouter.recognize($rootRouter._currentInstruction.urlPath).then(function (data) {
              return data.component.componentType;
          }));
    } else{
        reject(null);
    })
}

Now you can check resolve and reject with then() function,

factory.getCurrentComponent().then(function (resolved) {
    //handle success here
}, function(rejected) {
   // handle rejection here
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise