Returning promise after resolving promise in same function

Question

I have library function which needs to return the promise to post something in DB after it resolves another promise. I am trying to chain the promises but not working.

postIssue: function (issue) {
                  return getUserConfiguration()
                    .success(function (response, status, headers) {
                        var token = headers("X-XSRF-TOKEN");
                        if (token) {
                            _cookie = token;
                            if (issue.isValid()) {
                                var url = _baseURL + "/api/issue/";
                                var data = JSON.stringify(issue);
                                var config = {
                                    xhrFields: { withCredentials: true },
                                    headers: { "X-XSRF-TOKEN": _cookie }
                                };
                                return $http.post(url, data, config);
                            }
                            else {
                                return $q.reject("Issue doesn't have valid fields to submit");
                            }
                        }
                        else {
                            $q.reject("There is no XSRF token on response header");
                        }
                    })
                    .error(function () {
                        $q.reject("Error getting user's configuration");
                    });
              }

When I call the function in my code where I use this library It resolves and posts the issue correctly the data in then is shown of the first promise while I need the second one.

libraryAPI.postIssue(createIssue).then(function (data) {
                console.log(data);
            },function (error) {
                console.log(error);
            });

data here is not of the second promise but the first one but Issue is created correctly

Answer 1

Several points here.

1. Use .then(successCallback, errorCallback) rather than .success() and .error() .
2. The .then() callbacks has one parameter, and so does the error.
3. The response object in a successful callback also contain the headers and status. You can access them like so: response.headers and response.status (more information in the Official AngularJS Documentation for $http ).

4. You can either create a $q.defer() 'ed variable and return it at the end (resolve/reject it in the logic), or immediately return a $q.reject or $q.resolve . I have edited your code and added return before $q.reject .

    postIssue: function (issue) { return getUserConfiguration() .then(function (response) { var headers = response.headers; var token = headers("X-XSRF-TOKEN"); if (token) { _cookie = token; if (issue.isValid()) { var url = _baseURL + "/api/issue/"; var data = JSON.stringify(issue); var config = { xhrFields: { withCredentials: true }, headers: { "X-XSRF-TOKEN": _cookie } }; return $http.post(url, data, config); } else { return $q.reject("Issue doesn't have valid fields to submit"); } } else { return $q.reject("There is no XSRF token on response header"); } }, function (error) { return $q.reject("Error getting user's configuration"); }); }