jq ajax在循环中如何等待上一个完后再执行下一个

jq ajax在for循环或者each循环中如何等待上一个完后再执行下一个

回复列表(24|隐藏机器人聊天)
  • @Ta / 2022-07-23 / /
    async function PromiseForEach(arr, cb) {
      let realResult = [];
      for (let item of arr) {
        try {
          let res = await cb(item);
          realResult.push(res);
        } catch (error) {
          return Promise.reject(error);
        }
      }
      return Promise.resolve(realResult);
    }
    
    PromiseForEach(['https://hu60.cn/q.php/bbs.topic.103534.html', 'https://hu60.cn/q.php/bbs.topic.103531.html', 'https://hu60.cn/q.php/bbs.topic.103528.html'], (url) => {
      return new Promise((resolve, reject) => {
        $.ajax({
          url: url,
          type: "GET",
          success: (res) => {
            resolve(res);
          },
          error: (err) => {
            reject(err);
          },
        });
      });
    })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
    

    红米K30 Pro(变焦版)

  • @Ta / 2022-07-25 / /

    既然都用async了,不如用await。

    async function() {
      for (...) {
        try {
            var result = await $.ajax({...});
            console.log(result);
        } catch (err) {
            console.log(err);
        }
      }
    }
    
  • @Ta / 2022-07-24 / /
    迭代也是一个思路
  • @Ta / 2022-07-25 / /

    @echo醉老仙,我忘记给

    var result = $.ajax({...});
    

    await

    var result = await $.ajax({...});
    

    这样可以直接获得请求的结果,不再需要异步回调。出错时会抛出异常,可用try/catch捕捉。

  • @Ta / 2022-07-25 / /

    @老虎会游泳await后面是Promise对象才行,否则没有意义,$.ajax()返回的不是一个Promise。 $.ajax() instanceof Promise === falsehttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await
    红米K30 Pro(变焦版)

  • @Ta / 2022-07-25 / /

    @Curtion@老虎会游泳,js 新手求问,为嘛都不用 fetch 呢?

  • @Ta / 2022-07-25 / /

    @无名啊,当然是因为楼主要用jq的ajax啦
    红米K30 Pro(变焦版)

  • @Ta / 2022-07-26 / /

    @Curtion,你的jquery版本太老了。我怎么说你做了那么一堆看起来无用的包装

    点击“HTML代码”链接查看代码。

    HTML代码

    https://api.jquery.com/jquery.ajax/

    image.png

  • @Ta / 2022-07-25 / /

    @Curtion,fetch 很难用吗?

    看起来 jq 的 ajax 转到 fetch,很容易啊

    还少了第三方库依赖,原生函数性能应该更好些?

  • @Ta / 2022-07-25 / /

    @echo醉老仙,9楼是一个使用await等待$.ajax()的实际例子。任何返回Promise对象的函数都可以使用await进行阻塞式等待,这样就能把异步代码变成同步代码。不过用到await的函数前面要加async,加了之后它返回的也将是一个Promise对象。

    在JS引擎内部,await依然是通过回调方式执行的,try块在await之后的代码会被转移到$.ajax({...}).done()回调里,catch块会被转移到$.ajax({...}).fail()回调里。只是JS引擎自动帮我们做好了,我们不必自己动手完成,而且也能在循环里直接用了。

  • @Ta / 2022-07-26 / /

    @echo醉老仙,在循环中调用await等待$.ajax()的实际例子,点击“HTML代码”链接查看代码。

    HTML代码

  • @Ta / 2022-07-26 / /

    @老虎会游泳,研究了一会儿,发现是我理解错了检测Promise对象的方法,实际上只要是实现规范的普通JS对象也可以被当作Promise对象被引擎处理,而不必一定非要得调用new Promise() https://stackoverflow.com/questions/27746304/how-to-check-if-an-object-is-a-promise/27746324
    红米K30 Pro(变焦版)

  • @Ta / 2022-07-26 / /

    @无名啊fetch很好用,但我们研究的问题是Javascript同步等待语法,具体使用什么网络API其实关系不大。
    就算改用fetch,你还是会有在循环中如何等待上一个完后再执行下一个的问题,并且我的回答也几乎会一模一样(只有await $.ajax()那行会不一样)。

  • @Ta / 2022-07-26 / /

    @Curtion,嗯,看起来对象只要有一个then(callback)方法,就可以await

    HTML代码

  • @Ta / 2022-07-26 / /

    @老虎会游泳,我只用过 fetch,没用过 jquery 的

    fetch 就很容易 for (...) await fetch(...) 了,也就满足了楼主的需求

  • @Ta / 2022-07-26 / /

    @无名啊
    $.ajax() 也很容易 for (...) await fetch(...) 了,也就满足了楼主的需求
    可以看12楼的代码
    fetch更简单,因为读取内容不需要再次进行await,而且如果网页内容是JSON,还能直接得到JSON对象。

  • @Ta / 2022-07-26 / /

    @老虎会游泳,可能我对 jquery 的印象,停留在全是同步代码吧

  • @Ta / 2022-07-26 / /

    @老虎会游泳,现在的前端,还是很依赖 jquery 吗?

添加新回复
回复需要登录