如何链接原生Javascript承诺？

Question

我已经阅读了关于JS承诺的所有可以想象的文章，我仍然无法弄明白。 我正在尝试使用promises来管理多个XMLHTTPRequests。 例如：当xhr请求1和2完成时，调用此函数。

示例代码：

function initSession(){
  loadRates(0); 
  loadRates(10); 
  buildTable(); 
  // Get all rates from API, save to localStorage, then build the table. 
}


function loadRates(days) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    // save response to localStorage, using a custom variable
    localStorage.setItem("rates" + days, xhr.responseText); 
  };
  xhr.open('GET', url);
  xhr.send();
}

function buildTable() {
  // get data from localStorage
  // write to HTML table
}

在这个例子中，我如何将每个函数调用包装在Promise对象中，以便我可以控制它们何时被调用？

Answer 1

通过回调，您始终可以通过一个功能“响应”。 例如：

function getUsers (age, done) {
    // done has two parameters: err and result
    return User.find({age}, done)
}

Promises让您根据当前状态做出回应：

function getUsers (age) {
    return new Promise((resolve, reject) => {
        User.find({ age }, function (err, users) {
            return err ? reject(err) : resolve(users) 
        })
    })
}

这使“回调金字塔”变得扁平化。 代替

getUsers(18, function (err, users) {
    if (err) {
        // handle error
    } else {
        // users available
    }
})

您可以使用：

getUsers(18).then((users) => {
    // `getPetsFromUserIds` returns a promise
    return getPetsFromUserIds(users.map(user => user._id))
}).then((pets) => {
    // pets here
}).catch((err) => {
    console.log(err) // handle error
})

---

因此，要回答您的问题，首先您要对您的http请求使用承诺：

function GET (url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest()

        xhr.open('GET', url, true)
        xhr.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                return resolve(xhr.response)
            } else {
                return reject({ status: this.status, text: xhr.statusText })
            }
        }
        xhr.onerror = reject
        xhr.send()
    })
}

然后，您希望将其合并到loadRates函数中：

function loadRates (days) {
    var URL = URL_GENERATOR(days)
    return GET(URL).catch((err) => {
        // handle our error first
        console.log(err)
        // decide how you want to handle a lack of data
        return null
    }).then((res) => {
        localStorage.setItem('rates' + days, res)
        return res
    })
}

然后，在initSession ：

function initSession () {
    Promise.all([ loadRates(0), loadRates(10) ]).then((results) => {
        // perhaps you don't want to store in local storage,
        // since you'll have access to the results right here
        let [ zero, ten ] = results
        return buildTable()
    })
}

Answer 2

此外，请注意，有一个方便的功能来发出AJAX请求并获得promise - window.fetch 。 Chrome和Firefox已经支持它，对于其他浏览器，它可以是polyfilled 。

然后，您可以轻松解决您的问题

function loadRates(days) {
    return window.fetch(url).then(function(response) {
        return response.json(); // needed to parse raw response data
    }).then(function(response) {
        localStorage.setItem("rates" + days, response); 
        return response; // this return is mandatory, otherwise further `then` calls will get undefined as argument
    });
}

Promise.all([
   loadRates(0),
   loadRates(1)
]).then(function(rates) {
   return buildTable(rates)
})