Question

对于我的提取请求，我不断收到错误消息“字符串与预期模式不匹配”。我在这里和其他论坛上看到一些人有类似的问题，但是无法查明问题所在。如果有人有任何建议，请告诉我。

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);
                })
        }

Answer 1

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

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

如果服务器返回文本，

res.text() 是合适的。

在这种情况下，Safari 曾经给我 OP 的错误，但 Chrome 更具体："unexpected token W in json at position 0" -- res.json() 需要第一个字符字符串为 { 或 [，因为这是 JSON 开始的方式。

或者，正如 Safari 所说，“字符串与预期的模式不匹配。”

Answer 2

对于那些收到此消息的人，也许还调试他们的代码并找到一个HTTP响应对象，该对象包含的信息与开发人员工具中给出的信息不匹配，这是由no-cors创建的。删除no-cors，就不会出现此问题。

Answer 3

使用''代替'

url += '?i=${ingredients}&q=${meal}';

Answer 4

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);
    });

对于我的提取请求，我不断收到错误消息“字符串与预期模式不匹配”

4 个答案: