链接传递信息的jquery ajax调用的最佳方式

Question

我正在进行几个异步ajax调用，这些调用必须以特定的顺序执行，并且必须相互传递信息。以下是我目前的方法的概要。即使有三个API调用，它也有点像噩梦。使用5是不可能排列错误工作流或移动函数的(我也用完了屏幕空间)。是否有更好的方法来达到同样的结果?

/*
* API Call to get user
*/
$.ajax({
type: 'POST',
url: `robin.hood/get_user`,
data: JSON.stringify({"name":"Joe Dirt"}),
headers: {Authorization: 'Bearer ' + token},
datatype: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data, text_status, jq_xhr) {
/*
* Assume one user is returned only
*/
let user_id = data;
/*
* API Call to get the bank balance of the user
*/
$.ajax({
type: 'POST',
url: `robin.hood/get_user_balance`,
data: JSON.stringify({"user_id":user_id}),
headers: {Authorization: 'Bearer ' + token},
datatype: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data, text_status, jq_xhr) {
/*
* We record the balance
*/
let balance = data;
/*
* We invest in Gamestop stock
*/
$.ajax({
type: 'POST',
url: `robin.hood/buy_gamestop_stock`,
data: JSON.stringify({"user_id":user_id, "amount":balance}),
headers: {Authorization: 'Bearer ' + token},
datatype: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data, text_status, jq_xhr) {
/* STONKS!!! */
});
},
error: function (jq_xhr, text_status, error_thrown) {
/* NO STONKS */
}
});
},
error: function (jq_xhr, text_status, error_thrown) {
/* NO STONKS */
}
});
},
error: function (jq_xhr, text_status, error_thrown) {
/* NO STONKS */
}
});

相关但不太清楚的问题:

1. 链接多个jQuery ajax请求
2. jquery如何使用多个ajax调用一个接一个结束

Answer 1

$.ajax返回一个Thenable，这意味着您可以在async函数中await它，这比嵌套回调更容易管理:

async function run() {
try {
const user = await $.ajax({
type: 'POST',
url: `robin.hood/get_user`,
data: JSON.stringify({
"name": "Joe Dirt"
}),
headers: {
Authorization: 'Bearer ' + token
},
datatype: 'json',
contentType: 'application/json; charset=utf-8',
})
const balance = await $.ajax({
// ...
})
const data = await $.ajax({
// ...
})
/* STONKS!!! */
} catch (e) {
/* NO STONKS */
}
}
run()