如何从 jQuery 转换为 fetch API答案

【问题标题】：How to convert from jQuery to fetch API如何从 jQuery 转换为 fetch API
【发布时间】：2021-06-10 17:32:26
【问题描述】：

我正在处理一个函数

String.prototype.isActualWord = function() {
    if ($ != undefined) {
        let str = this.toLowerCase()
        let res = false
            
            const url = "https://api.wordnik.com/v4/word.json/" + str + "/definitions?limit=200&includeRelated=false&useCanonical=false&includeTags=false&api_key=_THIS_IS_CONFIDENTIAL_";

            try {
                $.ajax({
                    type: "GET",
                    url: url,
                    async: false,
                    success: function (data) {
                        res = true
                    },
                    error: function (data) {
                         res = false
                    }
                })
            }
            catch(e) {
                throw new Error(e.message)
            }
        return res
    } else {
        throw new Error("Please Include jQuery In Your Project")
    }
}

这里是获取代码：

let res = false
fetch(url)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    if(data[0] != undefined) {
        res = true
    } 
  });

你看，我想从我的项目中删除 jQuery 依赖项。如何使用 fetch API 以异步方式实现此目的。我尝试了很多方法，但都是徒劳的。

【问题讨论】：

你能告诉我们你尝试的获取代码吗？
@Scruffy 更新了我的问题。
如果您运行 fetch 模拟，您的要求是什么？
@PaulZaslavskij 当我在 promise .then() 中记录 res 变量时，它会显示更新后的值，但是当我尝试在此之外返回它时，它的值不会更新。我知道这是因为 js 的异步行为，但我不知道如何解决这个问题。
有两种方法可以解决它： 1. 移动代码，这将在 .then() 中使用您的响应数据。 2. 你可以使用 async/await 得到结果。比如const myValue = await fetch('url').then((res) => res.json())。但不要忘记将父函数设为async，否则将无法使用await语句

标签： javascript fetch fetch-api

【解决方案1】：

API 的获取是异步的，因此您应该在返回答案之前等待它。在检查中，您也应该添加 async/await：

async function testWord(word) {
    let check = await word.isActualWord();
    return check;
}

为了避免 cors 问题，将带有 cors 的 init 添加到 fetch api

String.prototype.isActualWord = async function() {
  let str = this.toLowerCase()
  let res = false
  let myHeaders = new Headers();
  let myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };
      
  const url = "https://api.wordnik.com/v4/word.json/" + str + "/definitions?limit=200&includeRelated=false&useCanonical=false&includeTags=false&api_key=_THIS_IS_CONFIDENTIAL_";

  try {
    const data = await fetch(url, (myInit as RequestInit))
    .then((response) => {
      return response.json();
    });
      if(data[0] != undefined) {
          res = true
      }
  }
  catch(e) {
    console.log('there was an error', e)
      throw new Error(e.message)
      }
  return res
}

【讨论】：

非常感谢！它终于解决了我的问题

【解决方案2】：

从 cmets 看来，您希望使用 fetch 就好像它是同步的。

要实现这一点，请在异步函数中使用 await 关键字。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

例如，您可能会遵循以下一般结构：

async function() {
  await fetch(...).then(...);
  return res;
}

【讨论】：

你能用异步函数重写我的代码吗？并解释一下？
编辑添加大纲。