title: How to convert Ajax to Fetch API in JavaScript?
body: <p>So I am using the <a href="https://cdnjs.cloudflare.com/ajax/libs/rivescript/1.17.2/rivescript.js" rel="noreferrer">JavaScript port of RiveScript</a> which uses ajax and of course I don't want to use jQuery anymore. There is only one line ajax and I want to change it to the new Fetch API.</p>
  
  <pre><code>**FYI: You can see the ajax code in line 1795 of the CDN.**
  </code></pre>
  
  <p>So here's the original code:</p>
  
  <pre><code>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)
  });
  </code></pre>
  
  <p>and here's what I tried so far using the Fetch API:</p>
  
  <pre><code>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);
              }
          };
      })
  </code></pre>
  
  <p>The app code:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>Using the Fetch API, I'm not seeing any error now though I'm also not seeing any error or success messages.</p>
  
  <p>Am I missing something here?</p>