JavaScript Promise 解析和拒绝函数调用序列

Question

我对以下简单的 Promise 示例感到困惑。

问题一:从console log看，为什么resolve在console.log("200")语句之后执行？

问题 2:在 onload() 之前启用 resolve() 并使用无效的 url 发出 GET 请求。即使 AJAX 返回 404，这次也不会调用 reject，因为调用了 onload 之前的 resolve。为什么 reject 不会被调用？

https://jsfiddle.net/tut5va0m/3/

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    //Enable below for Question 2
    //resolve(req.response);
    req.onload = function() {

      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {

        //Question 1
        resolve(req.response);

        console.log("200");
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

function resolve(data) {
console.log("Success!!! " + data);
}

function reject(data) {
console.log("Fail!!! " + data);
}

var url = '/echo/json';
var invalidUrl = '/abc'
get(url).then(resolve, reject);

//below is for Question 2
get(invalidUrl).then(resolve, reject);

Answer 1

Promise 通常用于异步操作，因此在 promise 操作之后的一行(例如 .then)将在执行 promise 处理程序之前执行。如果您习惯于回调函数，例如包装在 req.onload 函数中的代码，那么您应该熟悉这种行为。使用您的代码，您看到的是 Promise.resolve 正在执行，然后是 console.log，然后是链接到 Promise 的任何内容，在您的情况下具有令人困惑的名称resolve 和 reject 在此行注册:

get(url).then(resolve, reject);

重命名这些函数 afterResolve 和 afterReject 会更清楚，因为那是这些函数执行的时间。如果你想确保 console.log 在 promise 被解决或拒绝后执行，你需要将该语句放在那些 promise 处理函数中，或者链接另一个函数并在那里执行.

get(url).then(resolve, reject).then(function(){
    console.log('It worked')
})

关于你的第二个问题， promise 只能被解决或拒绝一次。不能多次解决，解决了也不能拒绝。这个 promise 在它被解决或拒绝后就完成了它的职责，调用这些函数之后不会做任何事情。之后您需要创建新的 promise 。

get(url).then(function successFirstRequest(){
    return get(someOtherUrl)
}).then(function successSecondRequest(){
   alert('Completed two network requests')
}).catch(err){
   // one of your requests failed
})