search

Home  >  Q&A  >  body text

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

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!

ringa_leeringa_lee2819 days ago933

reply all(8)I'll reply

  • ringa_lee

    ringa_lee2017-05-31 10:40:42

    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);
            })
        });
    };`

    reply
    0
  • 滿天的星座

    滿天的星座2017-05-31 10:40:42

    $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')
    }

    reply
    0
  • 滿天的星座

    滿天的星座2017-05-31 10:40:42

    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?

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-31 10:40:42

    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

    reply
    0
  • PHP中文网

    PHP中文网2017-05-31 10:40:42

    It is recommended to use the ultimate solution async.

    reply
    0
  • 巴扎黑

    巴扎黑2017-05-31 10:40:42

    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

    reply
    0
  • PHP中文网

    PHP中文网2017-05-31 10:40:42

    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())
        ....

    reply
    0
  • 世界只因有你

    世界只因有你2017-05-31 10:40:42

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

    reply
    0
  • Cancelreply