Javascript 如何使用承诺，或在函数完成之前完成ajax请求？

我有以下功能来检查用户会话，看看他们是否是员工。现在，我知道有更好的方法可以做到这一点，但我正在尝试制作一个与论坛软件相结合的简单应用程序

function isStaff(callback) {
    $.ajax({
        url: url
    }).done(function(data) {
        var session = $.parseJSON(data);
        if (session.is_staff === 1) {
            callback(true);
        } else {
            callback(false);
        }

    });
}

假设我在编译“post”（handlebar）时使用了这个函数

这里的问题是，检查用户是否是staff的请求直到函数运行后才完成请求

我知道Promissions是async的一种替代方法：false，即在函数完成之前发出请求并返回响应

---

但我不知道如何才能把它变成承诺。我试着去学，但我被这个概念卡住了。有人能给我解释一下吗？谢谢。

首先，让我们简化

compilePost

函数。此函数应该知道如何以同步方式编译post。让我们将

isStaff

fetching更改为一个简单的参数

function compilePost(post, isStaff) {
    var source = $('#feed-item-template').html();
    var template = Handlebars.compile(source);
    var context = {
        id: post.id,
        content: post.text,
        author: post.author,
        date: $.timeago(post.date),
        staff: isStaff
    }

    var html= template(context);
    return html;
}

现在，让我们创建一个新方法，具有单一目的-检查用户是否是员工：

function checkForStaffMemebership() {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            success: function (data) {
                var session = $.parseJSON(data);
                if (session.is_staff === 1) {
                    resolve(true);
                } else {
                    resolve(false);
                }
            }
        });
    });
}

此函数使用承诺包装您对服务器的原始

ajax

调用，每当

$.ajax

调用从服务器获得响应时，承诺将使用回答来解析用户是否是工作人员

---

现在，我们可以编写另一个函数来协调流程：

function compilePostAsync(post) {
    return checkForStaffMemebership()
        .then(function (isStaff) {
            return compilePost(post, isStaff);
        });
}

compilePostAsync

查找用户是否为工作人员。然后，它正在编辑这篇文章

请注意，

compilePostAsync

返回一个承诺，因此，如果您以前有类似于：

element.innerHTML = compilePost(post);

compilePostAsync(post).then(function (compiledPost) {
    element.innerHTML = compiledPost;
});

现在，您应该将其更改为：

element.innerHTML = compilePost(post);

compilePostAsync(post).then(function (compiledPost) {
    element.innerHTML = compiledPost;
});

一些注意事项：

function isStaff(url, post) {
    return $.ajax({
        url: url,
        dataType:"json"
    }).then(function(resp){
        //resp = $.parseJSON(resp); /*You dont require this if you have respose as JSON object. Just Specify it in 'dataType'*/
        var source = $('#feed-item-template').html();
        var template = Handlebars.compile(source);
        var context = {
            id: post.id,
            content: post.text,
            author: post.author,
            date: $.timeago(post.date),
            staff: resp.is_staff === 1 ? true : false
        };

        return template(context);
    });
}

isStaff(url, post).done(function(template){
    /*Your compiled template code is available here*/
}).fail(function(jqXHR, textStatus, errorThrown){
   console.log("Error:"+textStatus);
});

这只是一个例子，它肯定遗漏了一些东西（例如正确的错误处理）

isStaff

和

checkForStaffMemebership

（原始和新）没有任何参数，我想您应该知道如何传递用户ID或您可能需要的任何其他数据

阅读有关承诺的内容，它是一个有用的工具，在web上有很多关于它的数据，例如：

根据协议，您不需要用已经实现了承诺的承诺来包装ajax。而是按照下面的解释链接响应

从jQuery 1.5开始，$.ajax（）返回的jqXHR对象实现Promise接口，为它们提供Promise的所有属性、方法和行为（有关更多信息，请参阅Deferred object）

您可以通过链接响应来执行以下操作：

function isStaff(url, post) {
    return $.ajax({
        url: url,
        dataType:"json"
    }).then(function(resp){
        //resp = $.parseJSON(resp); /*You dont require this if you have respose as JSON object. Just Specify it in 'dataType'*/
        var source = $('#feed-item-template').html();
        var template = Handlebars.compile(source);
        var context = {
            id: post.id,
            content: post.text,
            author: post.author,
            date: $.timeago(post.date),
            staff: resp.is_staff === 1 ? true : false
        };

        return template(context);
    });
}

isStaff(url, post).done(function(template){
    /*Your compiled template code is available here*/
}).fail(function(jqXHR, textStatus, errorThrown){
   console.log("Error:"+textStatus);
});

注意：一定要同时执行。因为你可能永远不知道什么 出了问题：）

---

有关使用$.defer的承诺的简单说明： 为了理解，我创建了与您的要求类似的

说明：

基本上，Promise是用来实现异步JS代码的同步执行的

异步或异步代码是什么意思？

执行的代码可能会在任何给定的时间点返回一个非即时的值。支持此语句的著名示例是

jqueryajax

为什么需要它？

Promise实现帮助开发人员实现同步代码块，该代码块依赖于异步代码块进行响应，。就像在ajax调用中，当我向服务器请求数据字符串时，我需要等待服务器使用响应数据字符串对我做出响应，我的同步代码使用它来操作它、执行一些逻辑并更新UI

在作者用详细例子解释的地方，请遵循此步骤

---

PS:Jquery

$。延迟

以完全不同的方式实现或包装

承诺

。两者的用途相同。

在js中使用async await的解决方案如下：

let basedataset = {}
let ajaxbase = {};
//setting api Urls
apiinterface();

function apiinterface() {
    ajaxbase.createuser = '/api/createuser'
}
//setting up payload for post method
basedataset.email = profile.getEmail()
basedataset.username = profile.getGivenName()
//setting up url for api 
ajaxbase.url = ajaxbase.createuser
ajaxbase.payload = basedataset;

//reusable promise based approach 
basepostmethod(ajaxbase).then(function(data) {
    console.log('common data', data);
}).catch(function(reason) {
    console.log('reason for rejection', reason)
});
//modular ajax (Post/GET) snippets
function basepostmethod(ajaxbase) {

    return new Promise(function(resolve, reject) {
        $.ajax({
            url: ajaxbase.url,
            method: 'post',
            dataType: 'json',
            data: ajaxbase.payload,
            success: function(data) {
                resolve(data);
            },
            error: function(xhr) {
                reject(xhr)
            }

        });
    });
}

async function getMyAjaxCall() {
  const someVariableName = await ajaxCallFunction();
}

function getMyAjaxCall() {
    return $.ajax({
    type: 'POST',
    url: `someURL`,
    headers: {
      'Accept':'application/json',
  },
    success: function(response) {
// in case you need something else done.
    }
    });
}

---

“现在，我们可以编写另一个函数来协调流程”。。。。在什么情况下，我需要一个函数来“协调流程”？这对我来说很有趣。