处理来自异步调用的数据答案

【问题标题】：Manipulate data from an async call处理来自异步调用的数据
【发布时间】：2018-10-25 07:25:20
【问题描述】：

我有两个功能，

function getRequest(url, api_key, callback) {
    $.ajax({
        url: url,
        contentType: 'application/json',
        type: 'get',
        beforeSend: function(xhr){
            xhr.setRequestHeader('Authorization', 'Bearer ' + api_key);
        },
        success: function(response) {
            callback(response);
        },
        error: function(error) {
            console.log(error);
            document.getElementById("droplets").textContent = error;
        }
    });
}

function getDroplets(url, api_key) {
    var request = getRequest(url, api_key, function(response) {
        var droplets = response.droplets;
        var numDroplets = droplets.length;
        return {
            droplets: droplets,
            numDroplets: numDroplets
        };
    });
    alert(request);
}

我想要另一个函数，我们称之为listDroplets，它将调用getDroplets() 并处理从它返回的数据。我不知道该怎么做，因为getDroplets 里面有一个异步调用。

编辑：我尝试了以下方法，但仍然无法正常工作。

async function listDroplets() {
    await getDroplets(api_url, api_key);
    alert(request.numDroplets);
}

【问题讨论】：

还有：stackoverflow.com/questions/34210812/…
getRequest 应该返回 $.ajax(... 丢弃成功和错误。在 getDroplets 中你可以做 getrequest(...).then(result=>{return alteredResult}).then(finalResult=>...).catch(error=>handle your error) 当前获取请求（称为 getRequest）正在实现 getDroplets 应该实现的东西（当出现错误时）
@mplungjan 查看我更新的帖子
@HMR 如果成功是 Ajax 请求成功时调用的结果，我将如何返回结果？
重新打开，但仍然是stackoverflow.com/questions/14220321/…的骗子

标签： javascript asynchronous

【解决方案1】：

以下是您的函数如何返回类似对象的 Promise，您可以在异步等待函数中使用这些对象：

function getRequest(url, api_key, callback) {
  //to escape terrible jQuery Deferred and comfortably continue in Promise land
  // you can do
  // const deferred = $.ajax(...); return Promise.resolve(deferred)
  return $.ajax({//return promise like object
    url: url,
    contentType: 'application/json',
    type: 'get',
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Authorization', 'Bearer ' + api_key);
    }
  });
}

function getDroplets(url, api_key) {
  return getRequest(url, api_key)//return promise like object
  .then(function (response) {//
    var droplets = response.droplets;
    var numDroplets = droplets.length;
    return {
      droplets: droplets,
      numDroplets: numDroplets
    };
  })
  .catch(function (error) {//implement error if something goes wrong
    console.log(error);
    document.getElementById("droplets").textContent = error;
  });
}


async function listDroplets() {
  //depending on how old your jQuery is you may want to do this:
  // await Promise.resolve(getDroplets(api_url, api_key));
  const request = await getDroplets(api_url, api_key);
  //note that if something goes wrong then request is undefined (depending on jQuery version)
  alert(request.numDroplets);
}

【讨论】：

什么是 jQuery 延迟？
@JordanBaron deferred 是 jQuery 在 Promise 标准最终确定之前创建的类似对象的 Promise，尤其是它的旧实现具有与我们现在所知道的标准 Promise 不同的行为。即使你想支持 Internet Explorer（没有原生 Promises），我建议你获得一个好的 polyfil 并将 deferred 包装在 Promise.resolve(some deferred like $.ajax(...)) 中。