javascript - Promise encapsulates ajax and wants to execute ajax sequentially, but it is found that it is not executed in sequence. Expert guidance

Question

code show as below:

    function $myAjax(url, method, data, callback) {
        let p = new Promise(function(resolve, reject) {
            $Ajax.request({
                url: url,
                method: method,
                data: data,
                success: function(resp) {
                    callback(resp);
                    resolve();
                },
                failure: function(xhr) {
                    //todo
                    reject();
                }
            });
        });
        return p;
    }
    let $docs = document;
    $docs.getElementById('xxx').onclick = function() {
        $myAjax('https://mhd.uzai.com/api/CommonActive/GetPrizeGivingByUserid', 'get', { 'memberid': 1920740, 'activeid': 1 }, function(resp) {
            console.log(resp);
            console.log(1);
        }).then($myAjax('https://mhd.uzai.com/api/CommonActive/GetPrizeGivingByUserid', 'get', { 'memberid': 1920740, 'activeid': 1 }, function(resp) {
            console.log(resp);
            console.log(2);
        }));
    };`

That is to say, sometimes 2 will be printed first, and then 1 will be printed;

The order you want to execute is: 1, 2

Please give some guidance!

Answer 1

Um, you wrote this wrong. The correct way to write it is as follows

$docs.getElementById('xxx').onclick = function() {
    $myAjax('https://mhd.uzai.com/api/CommonActive/GetPrizeGivingByUserid', 'get', { 'memberid': 1920740, 'activeid': 1 }, function(resp) {
        console.log(resp);
        console.log(1);
    }).then(function() {
        $myAjax('https://mhd.uzai.com/api/CommonActive/GetPrizeGivingByUserid', 'get', { 'memberid': 1920740, 'activeid': 1 }, function(resp) {
            console.log(resp);
            console.log(2);
        })
    });
};`

Answer 2

$docs.getElementById('xxx').onclick = async function() {
let resp1 = await $myAjax('https://mhd.uzai.com/api/CommonActive/GetPrizeGivingByUserid')
let resp2 = await $myAjax('https://mhd.uzai.com/api/CommonActive/GetPrizeGivingByUserid')
}

Answer 3

The way you write it means that the reject function is not called. After it is successfully triggered, what is the output of your resp?

Answer 4

You need to use an array to ensure the queue, and use reduce to ensure the superposition operation of the return value.
Then implement the promise yourself

Answer 5

It is recommended to use the ultimate solution async.

Answer 6

First of all, you need to understand that Promise does not need to pass callback, Promise is just to not pass callbackcallback.
Let’s take a look at the syntax of Promise first.

var promise=new Promise(function(resolve,reject){
    //这里面执行异步操作，
    //参数说明：resolve,reject都是function，异步成功了，执行resolve，失败了执行reject
    //此处使用setTimeout模拟一个ajax
    setTimeout(function () {
        resolve(testData);
    }, 1000);
})
promise.then(function success(){
//执行resolve就等于初始执行这个函数
},function error(){
//执行reject就等于初始执行这个函数
});

//多个then
//promise.then....

It is recommended to read the tutorial written by Ruan Yifeng: Promise

Answer 7

The thens in all promises are scheduled to be executed immediately in order, and any of these thens cannot affect or delay other calls. That is to say, your second ajax will not wait until the first ajax request is executed. Solution

//ajax 的promise 封装
var ajax1 = new Promise((resolve,reject) => {
// request
})
var ajax2 = new Promise((resolve,reject) => {
// request
})
//调用

ajax1()
    .then(() => return ajax2())
    ....

Answer 8

Please post your code instead of screenshots. This is a trick for asking questions. The pictures are not very clear.