标签: fetch-api

我知道使用新的Fetch API(在这里使用ES2017的async/ await),您可以像这样发出一个GET请求:

async getData() {
    try {
        let response = await fetch('https://example.com/api');
        let responseJson = await response.json();
        console.log(responseJson);
    } catch(error) {
        console.error(error);
    }
}

但是你如何发出POST请求呢？

是否可以使用fetch API为每个请求设置默认标头？
我想要做的是Authorization每当有一个json web令牌时设置一个标题localStorage.我目前的解决方案是使用此功能设置标头:

export default function setHeaders(headers) {
    if(localStorage.jwt) {
        return {
            ...headers,
            'Authorization': `Bearer ${localStorage.jwt}`
        }
    } else {
        return headers;
    }
}

在获取请求中设置标题将如下所示:

return fetch('/someurl', {
        method: 'post',
        body: JSON.stringify(data),
        headers: setHeaders({
            'Content-Type': 'application/json'
        })
    })

但必须有更好的方法来做到这一点.我正在开发一个React/Redux/Express应用程序,如果有任何帮助的话.

我正在使用凭据和预检请求实现CORS,我有点不知道为什么预检请求在Firefox 30中始终失败但在Safari(7.0.2)和Chrome 35中有效.我认为这个问题与" 为什么会这样做有所不同" 经过身份验证的CORS请求的预检OPTIONS请求在Chrome中运行但不在Firefox中运行？ "因为我没有收到401,而是来自浏览器客户端的特定于CORS的消息:

"跨源请求被阻止:同源策略不允许在http://myurl.dev.com上读取远程资源.这可以通过将资源移动到同一域或启用CORS来解决."

没有显示源代码,这就是我正在做的事情:

在服务器上:

OPTIONS响应的标题:

• Access-Control-Allow-Origin:[[来自请求的原点]]
• 访问控制允许方法:"POST获取选项"
• Access-Control-Allow-Headers:"X-Requested-With"
• Access-Control-Allow-Credentials:"true"

POST响应的标题:

• Access-Control-Allow-Origin:[[来自请求的原点]]
• Access-Control-Allow-Credentials:"true"

在浏览器客户端中:

jQuery.ajax({
  url: requestUrl,
  type: 'POST',
  data: getData(),
  xhrFields: {
    withCredentials: true
  }
});

根据规范,这将触发OPTIONS预检请求,该请求需要在其响应中具有CORS头.我已经多次阅读过W3C规范了,在预检响应中我无法确定我做错了什么,如果有的话.

如果Chrome中的提取调用失败,那么我收到的唯一错误详细信息就是

TypeError:无法获取

在这种情况下,如何向最终用户显示信息性错误消息？

特别:

是否有可能获得有关fetch失败原因的任何详细信息？

例如,如果服务器崩溃,Chrome DevTools可能会记录net:ERR_EMPTY_RESPONSE的控制台消息,但似乎无法从JavaScript访问它.

据我所知,答案是否定的; 我认为这是出于安全原因,避免让恶意JS通过检查错误消息找出哪些站点是不可访问的.

是否有可能将获取错误与其他TypeErrors 区分开来？

如果我无法得到错误的详细信息,我想至少用一个信息丰富的"无法访问网站;请稍后再试"消息替换可怕的模糊"获取失败",并且我想做这没有任何显示其他消息的风险TypeError.

我在这里找到的唯一解决方案是检查实际情况message,看看是不是"Failed to fetch".这显然是特定于浏览器的; 它适用于Chrome,似乎它可以在Chrome的任何用户语言中使用,而其他浏览器则需要自己的测试和处理.

我正在尝试使用fetch API获取页面的HTML.这是我的代码.

var quizUrl = 'http://www.lipsum.com/';
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/html');
fetch(quizUrl,{
    mode: 'no-cors',
    method: 'get',
    headers: myHeaders
}).then(function(response) {
    response.text().then(function(text) {
        console.log(text);
    })
}).catch(function(err) {
  console.log(err)
});

它返回空字符串.任何猜测为什么它不起作用？

我尝试了对REST-API的ReactJS fetch调用,并希望处理响应.通话有效,我收到回复,我可以在Chrome开发工具中看到:

function getAllCourses() {
fetch('http://localhost:8080/course', {
    method: 'POST',
    mode: 'no-cors',
    credentials: 'same-origin',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        objectClass: 'course',
        crud: '2'
    })
}).then(function (response) {
    console.log(response);
    return response.json();

}).catch(function (err) {
    console.log(err)
});
}

当我尝试处理响应时,我得到了一个"SyntaxError:意外的输入结束"

return response.json();

console.log看起来像这样:

我的响应JSON看起来像这样,它是有效的,我用jsonlint检查它:

[
  {
    "0x1": {
      "users": [],
      "lectures": [],
      "owner": "0x2",
      "title": "WWI 14 SEA",
      "description": null,
      "objectClass": "course",
      "id": "course_00001"
    },
    "0x2": {
      "username": "system",
      "lectures": [],
      "course": null,
      "solutions": [],
      "exercises": [],
      "roles": [
        "0x3", …

出于某种原因fetch(https://fetch.spec.whatwg.org/)未在Safari(版本9.0.3)中定义,有谁知道为什么？它似乎是标准,在Chrome和Firefox中运行良好.似乎找不到其他人有同样的问题

我正在使用与redux的反应,这是一些示例代码:

export function fetchData (url) {
  return dispatch => {
    dispatch(loading())
    fetch(url, {
      method: 'GET'
    })
    .then(response => {
      response.json()
      .then(data => {
        dispatch(success(data))
      })
    })
  }
}

我对今天Javascript中相对路径的体验感到惊讶.我把情况归结为以下情况:

假设您有一个目录结构,如:

app/
   | 
   +--app.html
   +--js/
        |
        +--app.js
        +--data.json

我app.html所做的一切都是运行js/app.js

<!DOCTYPE html>
<title>app.html</title>
<body>
<script src=js/app.js></script>
</body>

app.js加载JSON文件并将其粘贴在以下的开头body:

// js/app.js
fetch('js/data.json') // <-- this path surprises me
  .then(response => response.json())
  .then(data => app.data = data)

数据是有效的JSON,只是一个字符串:

"Hello World"

这是一个非常小的用法fetch,但我很惊讶我传递给的URL fetch必须是相对app.html而不是相对的app.js.我希望这条道路的工作,因为data.json和app.js在同一个目录(js/):

fetch('data.json') // nope

有没有解释为什么会这样？

我正在使用 Strapi 设置一个 next.js 网站，但我的获取请求遇到了问题。当我在邮递员中发出请求时，我可以看到返回的数据，因此端点是正确的。

我得到的错误是TypeError: fetch failed在我的控制台中得到的

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11118:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:1337
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 1337
  }
}

在我的页面模板中，我有

import React from "react";

import Layout from "@/components/Layout/Layout";
import { fetcher } from "@/lib/api";

const Insights = () => {
  return (
    <Layout>
      <p>Insights</p>
    </Layout>
  );
};

export default Insights;

export async function getServerSideProps() {
  const …

我在Firefox和Chrome中使用window.fetch().出于某些原因,fetch()不会发送任何cookie.现在这不会成为问题,因为我可以使用它们发送它们

fetch('/something', { headers: { Cookie: document.cookie } })

但这不适用于httpOnly cookie.