Question

我到处寻找，如果可能或者如何循环遍历ajax请求，循环遍历数组中的值，我就无法获得。

因此需要将ajax请求作为数组[0]的数据值（串行）之一，完成请求，然后使用数组[1]执行下一个请求，依此类推。

我的代码：

$.ajax({
    url: 'example.com',
    type: 'GET',
    data: {
        message:  message,
        user: user,
        serial: i
    },
    success: function(response) {
        alert("Sent");
    },
     error: function(XMLHttpRequest, textStatus, errorThrown) {
           alert("Fail");
        }       
});

所以这适用于一个已定义的序列，但是当串行（变量'i'）是一个数组时，它会如何工作？它也不应该发送数组，它需要循环，一次发送一个值。

目前非常感谢任何帮助。

Answer 1

创建一个执行ajax调用的递归函数。当ajax调用结束时，该函数调用自身（递归）并传入更新的索引值，以便在传入的数组中用于下一个ajax调用。

 /**
 * Recursive function that make an ajax call over the {index} element inside an {array}
 * @param {Array} array the array to loop through 
 * @param {Number} index current index 
 */
    function Caller(array, index){
       if(array.length <= index){return;}
       $.ajax({
        url: 'example.com',
        type: 'GET',
        data: {
            message:  message,
            user: user,
            serial: array[index]
        },
        success: function(response) {
            alert("Sent");
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Fail");
        },
        complete: function(){
            Caller(array,++index);
        }
    }

递归函数调用完整回调（在调用完成后触发，无论是成功还是错误）。

通过这种方式，你可以通过数组，只在前一个请求完成时发送一个ajax请求。

Answer 2

尝试使用forEach()：

array.forEach(element => {
    $.ajax({
        ...
        data {.., serial: element...}
        ...
    });
});

Answer 3

2018年，所以有多种好方法可以做到这一点;

您可以使用\\[，Promises实际返回一个;和$.ajax以串行方式执行XHR请求。
你可以保留你的回调式代码并使用一个小的实用程序函数以一种可读的方式抽象异步迭代，你可以反复使用它。

我将涵盖这两种情况。

与Promises和async / await

的异步迭代

自jQuery 1.5起，async/await返回$.ajax。因此，如果您使用的是现代浏览器，则只需Promise即可。

这是迄今为止最优雅和简洁的方式，因为代码看起来像同步代码，因此它更具可读性。请注意，虽然代码看起来同步，但它实际上是non-blocking。

＆＃13;

await

＆＃13;

const getPosts = async (pages) => {
  const posts = []

  for (const page of pages) {
    const post = await $.ajax({
      url: 'https://jsonplaceholder.typicode.com/posts/' + page
    })

    posts.push(post)
  }

  return posts
} 

getPosts([1, 2, 3, 4, 5]).then(posts => {
  console.log(posts)
}).catch(err => {
  console.error(err)
})

＆＃13;

带回调的异步迭代

这是＆＃34;传统＆＃34;使用回调进行异步操作的方法。这种风格根本不需要现代浏览器，因为在它的基础级别它只是绕过函数来实现non-blocking行为。

然而，这种类型的代码更难以使用;您需要依赖包含常用操作（循环，映射等）的实用程序函数来有效地处理此类代码。

我已经写了一个小实用功能让你：

迭代数组的元素。
指定为每次迭代调用的回调函数
在每次迭代时调用此函数。将当前迭代的over Array元素与您需要调用的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>参数一起传递给它，以便继续进行 next 迭代。
- 调用此回调函数的next会将结果推送到最终的next数组，然后继续下一次迭代。
指定在所有迭代完成后调用的最终回调函数。

如果我没有弄错的话，这在操作上与热门async.mapSeries模块的async方法相同。

`result`

在以下示例中，我传递了async.mapSeries个帖子以从REST API中获取。

当所有迭代完成后，最终回调中的Array参数包含一个包含5个帖子的posts。

它利用了error-first callbacks，这是一种常见模式，可以在异步操作中出现问题时优雅地将错误传播回回调链。

＆＃13;

Array

＆＃13;

// async.mapSeries utility Function

const async = {
  mapSeries: function(arr, onIteration, onDone, { i = 0, acc = [] } = {}) {
    arr.length ?

    onIteration(arr[i], (err, result) => {
      if (err) return onDone(err)

      acc.push(result)

      acc.length < arr.length ?
        this.mapSeries(arr, onIteration, onDone, {
          i: ++i, acc
        }) : onDone(null, acc)
    })

    : onDone(null, arr)
  }
}

// Usage

async.mapSeries([1, 2, 3, 4, 5], (page, next) => {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/' + page,
    success: response => {
      next(null, response)
    },
    error: (XMLHttpRequest, textStatus, err) => {
      next(err)
    }
  })
}, (err, posts) => {
  if (err) return console.error('Error:', err)

  console.log(posts)
})

＆＃13;

是否有可能/你可以每次循环ajax GET请求吗？

3 个答案:

与Promises和async / await

带回调的异步迭代

`result`