背景需求

通过 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,结果发现自己理解错了。呜呜 -_-!!


↙↙↙阅读原文可查看相关链接,并与作者交流