html 对于我的获取请求，我一直收到错误“字符串与预期模式不匹配”

jhiyze9q 于 2022-12-02 发布在其他

关注(0)|答案(5)|浏览(198)

我不断得到错误“字符串不匹配预期的模式”为我的获取请求。我看到一些人有类似的问题在这里和其他论坛，但不能找出问题。
错误的原因是什么？

function showRecipes(){
    const ingredients = document.getElementById('ingredients').value.replace(/\s/g, "");
    const meal = document.getElementById('meal').value;
    const display = document.getElementById('display'); //Where results will go

    let url = 'http://www.recipepuppy.com/api/';
    url += `?i=${ingredients}&q=${meal}`;

    fetch(url, { mode: "no-cors"})
        .then(response => {
            response.json()
                .then(data => {
                    data.results.forEach(recipe => {
                        const container = document.createElement('div');
                        container.setAttribute('class', 'container');

                        const h1 = document.createElement('h1');
                        h1.textContent = recipe.title;

                        const p = document.createElement('p');
                        p.textContent = recipe.ingredients;

                        display.appendChild(container);
                        container.appendChild(h1);
                        container.appendChild(p);
                    })
                })
                .catch(err => {
                    console.log(err);
                })
        })
        .catch(err => {
            console.log('ERROR: ' + err);
        })
}

Html

来源：https://stackoverflow.com/questions/55681242/i-keep-getting-the-error-the-string-did-not-match-the-expected-pattern-for-my

5条答案

按热度按时间

xzlaal3s1#

如果服务器的响应是文本，但您试图使用res.json()将其解析为JSON，则可能会出现此错误。

fetch(serverUrl, {method: 'GET'})
.then((res) => res.json())

如果服务器传回文字，则res.text()是适当的。
在这种情况下Safari曾经给我OP的错误，但Chrome更具体：* “json中位置0处的意外标记W”* --res.json()期望字符串的第一个字符是{或[，因为JSON就是这样开始的。
或者，如Safari所述，“字符串与预期模式不匹配。"

赞(0）回复(0）举报 2022-12-02

ddrv8njm2#

对于那些接收到这个消息的人，也可能调试他们的代码并发现HTTP响应对象包含的信息与开发人员工具中给出的信息不匹配，这是由no-cors造成的问题。删除no-cors，您就不会有这个问题。

赞(0）回复(0）举报 2022-12-02

juzqafwq3#

fetch('example.json').url())
        .then(res => {
            console.log(res);
        });

如果上面的代码返回200的状态，并且res.text()工作但res.json()不工作，则这是json格式问题，这可能是编译器没有识别以下内容：

引用，例如/**/或//
结尾逗号，例如},}或],}
空白，例如\t、\n

建议的json模式为

{"a":"b"}

虽然下面的内容更适合阅读：

{
    "a": "b",
}

此问题在Sublime Text中明显出现
这里有一个解决方案：
GitHub
然后尝试src后跟：

fetch('example.json')
    .then(res => res.json())
    .then(json => {
        console.log(json);
    });

赞(0）回复(0）举报 2022-12-02

e1xvtsh34#

与this answer相关的async/await更新示例：

async function index() {
  var res2 = await fetch('url with text response')

  // res2 is in json format <-- not valid here, see error above in the question
  // var res = await res2.json()

  // res2 is in text format <-- valid here
  var res = await res2.text()
}

赞(0）回复(0）举报 2022-12-02

2hh7jdfx5#

对于那些从本地或公共文件夹阅读json文件时遇到此错误的人，请确保文件路径前面的前缀正确。如果文件名中没有首字母“/”，它将查找当前目录，可能找不到json文件。因此，请不要使用以下方法：

fetch("data.json")

尝试：

fetch("/data.json")

赞(0）回复(0）举报 2022-12-02

我来回答

html 对于我的获取请求，我一直收到错误“字符串与预期模式不匹配”

5条答案

与this answer相关的async/await更新示例：

相关问题

热门标签

最新问答