Question

我不知道是否可能，但是我正在尝试获取多个ajax响应并在另一个函数中访问它的值。

我实际上得到了响应（每个响应两次），但是我无法返回响应的各个值。

function firstResponse() {
  const response1 = $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/http://api.icndb.com/jokes/random',
    method: 'GET',
    contentType: 'application/json',
  });

  response1.done(function(response1) {
    test(response1);
  })
}

function secondResponse() {
  const response2 = $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/https://official-joke-api.appspot.com/random_joke',
    method: 'GET',
    contentType: 'application/json',
  });

  response2.done(function(response2) {
    test(response2);
  })
}

firstResponse();
secondResponse();

function test(response1, response2) {
  console.log('Response 1', response1);
  console.log('Response 2', response2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

有多种方法可以实现这一目标。我个人会选择promises。

function firstResponse() {
  return $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/http://api.icndb.com/jokes/random',
    method: 'GET',
    contentType: 'application/json'
  });
}

function secondResponse() {
  return $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/https://official-joke-api.appspot.com/random_joke',
    method: 'GET',
    contentType: 'application/json'
  });
}

function test() {
  Promise.all([
    firstResponse(), 
    secondResponse()
  ]).then(result => {
    console.log(result);
  });
}

test();

在test函数中，调用Promise.all，它等待所有单个的Promise都被解析，并按照在传递时传递给它的Promise的顺序将结果输出为数组。打电话。

Answer 2

let urls = ['https://cors-anywhere.herokuapp.com/http://api.icndb.com/jokes/random',
    'https://cors-anywhere.herokuapp.com/https://official-joke-api.appspot.com/random_joke'];

let structure = {
    method: 'GET',
    contentType: 'application/json',
};

async function first() {
    try {
        const response = await $.ajax({
            url: urls[0],
            structure,
        });

        return response;
    } catch(error) {
        // Error
    }

}

async function second() {
    try {
        const response = await $.ajax({
            url: urls[1],
            structure,
        });

        return response;
    } catch(error) {
        // Error
    }
}

async function test() {
    let response = await ('s')
    return response
}

first()
    .then(() => second());

Answer 3

Ajax调用是异步的，因此，如果要在一个函数中处理两个结果，则必须自己做一个计数器，最简单的方法是这样的：

function firstResponse() {
  const response1 = $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/http://api.icndb.com/jokes/random',
    method: 'GET',
    contentType: 'application/json',
  });

  response1.done(function(response1) {
    test("response1", response1);
  })
}

function secondResponse() {
  const response2 = $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/https://official-joke-api.appspot.com/random_joke',
    method: 'GET',
    contentType: 'application/json',
  });

  response2.done(function(response2) {
    test("response2", response2);
  })
}

var responses = [];

firstResponse();
secondResponse();

function test(index, data) {
  responses[index] = data;
  if (Object.keys(responses).length === 2) processResponses();
}

function processResponses() {
  console.log(responses);
}

有多种更高级的处理方式，例如使用async / await之类的方法，但这无需完成对现有代码的大量修改即可完成工作。

更新：用于异步/等待方式，这是我如今首选的处理方式：

(async () => {
  const response1 = await $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/http://api.icndb.com/jokes/random',
    method: 'GET',
    contentType: 'application/json',
  });

  const response2 = await $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/https://official-joke-api.appspot.com/random_joke',
    method: 'GET',
    contentType: 'application/json',
  });

  console.log(response1);
  console.log(response2);

})();

如何在一个函数中获得多个ajax响应

3 个答案: