如何在 JavaScript 中将 Ajax 转换为 Fetch API？

Posted 2023-02-27

【中文标题】如何在 JavaScript 中将 Ajax 转换为 Fetch API？

【英文标题】：How to convert Ajax to Fetch API in JavaScript?

【发布时间】：2018-03-29 22:47:05

【问题描述】：

所以我使用了javascript port of RiveScript，它使用了ajax，当然我不想再使用jQuery了。只有一行 ajax，我想将其更改为新的 Fetch API。

**FYI: You can see the ajax code in line 1795 of the CDN.**

原来的代码如下：

return $.ajax(
    url: file,
    dataType: "text",
    success: (function(_this) 
        return function(data, textStatus, xhr) 
            _this.say("Loading file " + file + " complete.");
            _this.parse(file, data, onError);
            delete _this._pending[loadCount][file];
            if (Object.keys(_this._pending[loadCount]).length === 0) 
                if (typeof onSuccess === "function") 
                    return onSuccess.call(void 0, loadCount);
                
            
        ;
    )(this),
    error: (function(_this) 
        return function(xhr, textStatus, errorThrown) 
            _this.say("Ajax error! " + textStatus + "; " + errorThrown);
            if (typeof onError === "function") 
                return onError.call(void 0, textStatus, loadCount);
            
        ;
    )(this)
);

这是我迄今为止使用 Fetch API 尝试过的：

return fetch(file, 
        dataType: "text"
    )
    .then(function(_this) 
        return function(data, textStatus, xhr) 
            _this.say("Loading file " + file + " complete.");
            _this.parse(file, data, onError);
            delete _this._pending[loadCount][file];
            if (Object.keys(_this._pending[loadCount]).length === 0) 
                if (typeof onSuccess === "function") 
                    return onSuccess.call(void 0, loadCount);
                
            
        ;
    )
    .catch(function(_this) 
        return function(xhr, textStatus, errorThrown) 
            _this.say("Ajax error! " + textStatus + "; " + errorThrown);
            if (typeof onError === "function") 
                return onError.call(void 0, textStatus, loadCount);
            
        ;
    )

应用代码：

var bot = new RiveScript();

bot.loadFile("./brain.rive", loading_done, loading_error);


function loading_done (batch_num) 
    console.log("Batch #" + batch_num + " has finished loading!");

    bot.sortReplies();

    var reply = bot.reply("local-user", "Hello, bot!");
    console.log("The bot says: " + reply);


function loading_error (error) 
    console.log("Error when loading files: " + error);

使用 Fetch API，我现在没有看到任何错误，尽管我也没有看到任何错误或成功消息。

我错过了什么吗？

【问题讨论】：

从.then()返回函数的目的是什么？

【参考方案1】：

fetch init object 没有 dataType 键。

要表明您想要返回纯文本，请在请求中添加 Accept: text/plain 标头：

fetch(file, 
    headers: 
      "Accept": "text/plain"
    ,
  )

fetch 调用返回一个使用 Response object 解析的承诺，并且 Response 对象提供了使用 text、JSON data 或 Blob 解析的 methods — 这意味着处理来自fetch(…) 调用的响应的基本形式如下：

fetch(file, 
  headers: 
    "Accept": "text/plain"
  ,
)
.then(response => response.text())
.then(text => 
  // Do something with the text
)

因此，您需要获取问题中的现有代码并将其放入该表单中。

【讨论】：

谢谢先生。我终于得到了文本，现在可以根据需要正确转换它。