标签: fetch-api

我需要编写使用项目 ID 查找有关项目的信息的程序。

该 API 一次仅获取一项，因此我只能对每项执行一次查询。API 仅限于五个同时请求。任何额外的结果都会给出 HTTP 429 错误。

如果有一个 JavaScript 对象，其中包含所有带有 ID\xe2\x80\x99s 的项目

如何检索所有给定 ID 的信息而不触发同时请求限制，并且不对已看到的项目 ID 执行不必要的查询。

import fetch from "node-fetch";\n\nlet itemObject = [\n  { itemName: "", itemID: "" },\n  { itemName: "", itemID: "" },\n  { itemName: "", itemID: "" },\n  { itemName: "", itemID: "" },\n];\n\nasync function sendIDRequests() {\n  try {\n    const response = await fetch("https://url/items/:ID", {\n      headers: {\n        Authorization: "",\n      },\n    });\n    if (!response.ok) {\n      throw new Error(`${response.status} ${response.statusText}`);\n    }\n …

我目前有一个坐标列表，我用它来获取附近的徒步旅行。假设我将列表状态更新为新坐标，但先前坐标的提取请求未完成 - 如何取消对先前坐标发出的所有提取请求，而仅根据新坐标调用新的提取请求？

我尝试实现，AbortController但它可能不起作用，因为它没有取消“批量”的获取请求，而只是取消单个获取请求。我的代码如下：

  let abortController = new AbortController();
  const getNearbyHikes = async (coordinates) => {
    abortController.abort();
    abortController = new AbortController();
    for (const coord of coordinates) {
      if (coord) {
        try {
          const { lat, lng } = cord.coordinates
          const response = await fetch(
            'http://localhost:5000/category/' + lat + "/" + lng + '/' + searchCategory,
            {signal: abortController.signal}
          )
          const result = await response.json();
          setHikes((prevState) => [...prevState, ...result.businesses])
        } catch (error) {
          if(error.name === 'AbortError'){
            return;
          }
          throw error …

我正在使用 Next.js，并在将其集成到我的应用程序之前尝试对 SWR 进行一些测试。因此，下面只是一个 faker.api 测试，看看它的运行情况并熟悉它。

一切都工作得很好，但由于某种原因，我似乎无法恢复错误，我的控制台日志没有在控制台中打印任何内容。

import type { NextPage } from 'next'
import { useState } from 'react'
import useSWR, { SWRConfig } from 'swr'
import UseBooks from '../Hooks/UseBooks'

type HomeProps = NextPage & {
  serverData: any
}

const fetcher = (url:string) => fetch(url).then(r => r.json()) 

const Home = ({serverData}: HomeProps) => {
const [shouldFetch, setShouldFetch] = useState(false)
const {data, error} = useSWR(
  `https://fakerapi.it/api/v1/ompanies?_quantity=10`,
  fetcher,
  {
    fallbackData: serverData,
    onError: (error, key)=> {
     console.log(error)
    }
  })

const  [booksData, booksError] …

我需要一个const来定义这个主体（字符串）。然后我可以用它来做类似的事情console.log()

fetch("url", {
            headers: {
                "Content-Type": "application/json",
                'Authorization': 'Basic ' + btoa(globalUsername + ":" + globalPassword),
            },
            method: "POST",
            body: moveBody
        }).then(response => console.log(response.status)).
        then(response => console.log(response.text(body)));

我需要处理 React 应用程序中组件中的异步预输入搜索栏（键入时获取到后端）中的错误，因此在考虑如何处理它们时，我想到了错误边界。

我正在考虑将搜索结果包装在错误边界中，并在结果响应无效时抛出错误。

但后来我想错误边界应该只用于更严重的错误吗？通过它处理获取错误真的是个好主意吗？

我fetch()在我的 Web 应用程序和 Safari 中调用，获取 Promise 被拒绝，并且我在 Web Inspector 控制台中看到如下错误：

Fetch API cannot load https://example.com/whatever due to access control checks.

这听起来像是 CORS 错误，但我正在发出同源请求（并且不涉及任何广告拦截器或任何内容）。发生此错误的其他原因还有哪些？

我将 Nuxt 3 与 Laravel API 后端一起使用，并尝试找出哪个可组合项useAsyncData或useFetch，或者只是$fetch我应该用于 CRUD 和身份验证中的不同 API 请求。

文档说：

useFetch 是在组件设置函数中处理数据获取的最直接的方法。另一方面，当想要基于用户交互发出网络请求时，$fetch 几乎总是正确的处理程序。

但是，在组件中使用 $fetch 而不用 useAsyncData 包装它会导致两次获取数据：首先在服务器上，然后在水合作用期间再次在客户端上，因为 $fetch 不会将状态从服务器传输到客户端。因此，由于客户端必须再次获取数据，因此双方都会执行 fetch。我们建议在获取组件数据时使用 useFetch 或 useAsyncData + $fetch 来防止重复获取数据。

您可以将 $fetch 用于仅在客户端执行的任何方法。

POST我在文档中看到的唯一请求示例使用$fetch. 几乎所有其他示例都是GET使用 的请求useFetch。

这是否意味着useFetch通常应该用于GET请求和$fetchforPOST和PUT请求？

我很困惑，因为我看过很多关于POST使用 requestsuseFetch和GETrequests that use的教程$fetch。

它是否更容易用于useFetch所有请求，因为它有很多$fetch没有的参数、选项和返回值，并且还因为它避免了在组件中两次获取数据的风险？

无论如何， 和 的错误处理useFetch …

以下代码是使用fetch polyfill发出HTTP POST请求:

fetch(url, {
  method: 'post',
  body: JSON.stringify({
    'token': this.state.token
  })
})
  .then((response) => response.json())
  .then((responseData) => {
    console.log(responseData)
  })
  .done();

此请求将数据作为字符串化的json obj发送.有没有办法将数据作为键值对发送,类似于python中的requests.post(url,data = payload).

我需要链接promises来发出几个GET请求,并在将数据用于其他地方之前将其合并.我很难解决这两个承诺.我尝试在尝试使用之前返回两个promise的数组,.json()但这也不起作用.

activate() {

    // data is from http://jsonplaceholder.typicode.com/photos and
    // since there is not a photos2/ endpoint this is conceptual and 
    // represents batch importng
    return Promise.all([
        this.http.fetch('photos'),
        this.http.fetch('photos2')
    ]).then(responses => {

        console.log(responses); // see block of code below this for output

        // how can I combine the two promises here so I can resolve them with 'then' below?
        return responses[0].json(); // can return one response
        // return responses; //  doesn't work

    }).then(data => {
        console.log(data);
        this.photos = …

在服务器上，我使用express.js，在浏览器中，我使用fetch API。我使用默认域发送cookie，然后浏览器正确设置它并随后续请求一起发送。但是，当我将域设置为父域时，不会设置cookie。我的理解是应该的。

假设我的代码是从“ my.example.com”端口8080提供的。那么我的服务器代码如下所示：

response.cookie("token",token,{
    encode:String,
    domain:".example.com",
    expires: new Date(Date.now()+86400000000),
    secure:false}
)

在客户端上，我的代码如下所示：

fetch("/login", {
    credentials: "include", // also tried "same-origin"
    mode:"cors", // also tried omitting
    headers:new Headers( {
         // authentication data is here
    })
})

起初我以为这是父域，但如果我使用任何域，似乎cookie不会被保存。

因此，以下任何一项都不会保存在客户端上：

    domain:".example.com",

    domain:".example.com:8080",

    domain:"my.example.com",

    domain:"my.example.com:8080",

但是，如果我省略“域”，那么它会被保存。

而且要明确一点，当我在Chrome开发人员工具中查看回复时，我看到收到了Cookie-出于某种原因它没有被保存。

我需要能够为任何其他子域中的任何子域设置此Cookie。根据我的阅读，a.example.com应该没有问题，将cookie设置为.example.com，以便b.example.com可以使用它。

更新：我也尝试使用XMLHttpRequest，并获得相同的行为！

更新2：我也不能直接从具有父域的javascript设置cookie，例如，这可行：

document.cookie=("token=<...>; Domain=my.example.com; Path=/")

但这不是：

document.cookie=("token=<...>; Domain=.example.com; Path=/")

从我已阅读的所有内容来看，此行应该有效，但对我而言不起作用。我认为这里应该没有问题是正确的吗？如果是这样，我该如何解决为什么无法设置Cookie的问题？我已经尝试过的事情：

1. my.example.com指向127.0.0.1。使其指向另一个非本地主机地址，没有解决该问题。

2. my.example.com实际上不是.com地址，也不是其他5个硬编码地址之一，不允许仅使用一个点。使其指向.com地址，但未解决问题。

3. 也许从控制台设置cookie以进行测试不起作用。我直接从服务器加载的javascript代码中尝试了所有更改，但没有解决问题。

4. 标题的顺序可能很重要。将路径移到域之前

5. 也许情况很重要。将“路径”和“域”更改为全部小写。没有解决问题。

6. 也许“路径”不需要存在。删除它并不能解决问题。

7. 从Cookie的元素之间删除了空格。没有效果。

8. 也许是一个奇怪的字符使需要编码的东西变得混乱。已检查并且令牌中仅包含字母数字键。Cookie的总长度仅为大约100个字节，远低于最大长度，因为只有一个Cookie。

9. 也许我的域名有些奇怪，浏览器不喜欢上面没有提到的东西。所以我去了www.example.com，打开控制台并输入：

   document.cookie =“ token = 1; domain …