Promise 封装ajax想顺序执行ajax，但是发现并没有按照顺序执行，高手指点_Html5_论坛

Promise 封装ajax想顺序执行ajax，但是发现并没有按照顺序执行，高手指点

韩***3 分类：Html5 人气：1321 回帖：9 发布于6年前收藏

代码如下：

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

也就是说有时候会先打印出来2，后打印出来1；

想要执行的顺序是：1，2

请高手指点！

标签：node.js html5 javascript

讨论这个帖子（9）垃圾回帖将一律封号处理……

Lv4 码徒

宁***远 JS工程师 6年前#1

不需要写callback了，把data传给resolve（data），then方法的第一个参数就相当于callback

Lv5 码农

谁***哥 Web前端工程师 6年前#2

推荐用终极方案 async。

Lv6 码匠

ti***nx 学生 6年前#3

你这写法，就是说没有调用reject函数,在成功触发后，你的resp输出的是什么？

Lv6 码匠

so***t0 CEO 6年前#4

首先，你要理解一点，Promise不需要传callback,Promise就是为了不传callback回调的。
先看下Promise语法吧。

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

建议看看阮一峰写的教程：Promise

Lv6 码匠

24***23 软件测试工程师 6年前#5

额，你这个写错了，正确写法如下

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

Lv3 码奴

销***表 PHP开发工程师 6年前#6

所有 promise 中的then 都是按顺序调度立即执行，这些 then 中任意一个都无法影响或延误对其他的调用。也就是你的第二个 ajax 是不会等第一个 ajax 请求晚再执行。解决办法

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

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

Lv3 码奴

销***表 PHP开发工程师 6年前#7

请贴出你的代码，而不是截图，这是提问的一个小技巧哦，图片不怎么清晰。

Lv6 码匠

bo***18 产品经理 6年前#8

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

Lv5 码农

ah***xr 软件测试工程师 6年前#9

你需要用数组来保证队列，用reduce来保证返回值的叠加操作。
然后自己实现promise

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取