灌水 一不小心踩了 jQuery done then 的一个坑

codeskyblue · 2019年03月01日 · 最后由 达峰的夏天 回复于 2019年03月02日 · 1616 次阅读

背景需求

通过 jQuery Ajax 的 Promise 完成
先请求 https://httpbin.org/get?value=1 请求结束后再请求 https://httpbin.org/get?value=2 的功能

这里用了 https://httpbin.org 这个网站,这个网站可以把你请求的内容,都返回回来。非常适合做调试用。

错误写法

$.ajax({
  method: "get",
  url: "https://httpbin.org/get",
  data: { value: 1 }
})
  .done(ret => {
    console.log("step1", ret.args.value); # 期望是1
    return $.ajax({
      url: "https://httpbin.org/get",
      data: { value: 2 }
    });
  })
  .done(ret => {
    console.log("step2", ret.args.value); # 期望是2 实际还是1
  });

实际效果是 https://httpbin.org/get?value=1 请求还没结束就开始请求 https://httpbin.org/get?value=2

正确用法

查了下 Stack Overflow,原来 done 只是回调了一下,并没有返回 Promise 对象。
https://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-done

将 done 换成 then 就好了,另外 then 的别名是 pipe
BTW: done + fail 也并不等于 then, 因为 done 的返回值并不能成为新的 promise,然而 then 可以。

所以正确写法是

$.ajax({
  method: "get",
  url: "https://httpbin.org/get",
  data: { value: 1 }
})
  .pipe(ret => {
    console.log("step1", ret.args.value); # step1 1
    return $.ajax({
      url: "https://httpbin.org/get",
      data: { value: 2 }
    });
  })
  .pipe(ret => {
    console.log("step2", ret.args.value); # step2 2 
  });

结尾

本来是查一个 bug,结果发现自己理解错了。呜呜 -_-!!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 1 条回复 时间 点赞

promise 在等你

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册