标签: fetch-api

我正在使用浏览器的本机提取API来处理网络请求.此外,我正在使用whatwg-fetch polyfill用于不支持的浏览器.

但是,如果请求失败,我需要重试.现在我找到了这个npm包whatwg-fetch-retry,但他们没有解释如何在他们的文档中使用它.有人可以帮我这个或建议我另类吗？

我想通过 fetch API 将一些数据发送到服务器，以便它可以基于此查询数据库。与 Ajax 不同，我找不到任何合适的方法来做到这一点。这是我的 fetch 电话：

{fetch("http://192.168.90.53:4000/game/?email=adicool2294@gmail.com", {method: "GET"} )
        .then((response) => response.json())
        .then((responseData) => {
            id= responseData.id;
            name= responseData.name; 
            console.log(responseData);
        })
       .catch((error) => {
             console.warn(error);
           }); 
  }
}

我想发送一个参数，例如电子邮件，以便服务器可以使用它查询数据库。我正在使用 react-native android 因此不能使用 Ajax 请求。我只想使用 GET 方法。目前，服务器未在 req.query 中显示我在 URL 中传递的查询参数

我有一个 ASP.NET MVC 5 应用程序，它处理来自我的网站的使用 fetch API 发出的请求。当我的控制器中发生异常时，我使用自定义的“OnException”方法（从 System.Web.Mvc.Controller 重写）以 JSON 格式发送结果，其中包含有关错误的数据。我这样做是因为我不想发送默认的 HTML 错误页面。在这个对所有控制器都是全局的方法中，我需要检查请求是否已使用 fetch API 执行（如果没有，我什么都不做）。

我怎样才能做到这一点 ？

• 我应该向我的请求添加自定义 http 标头吗？
• 我应该在所有请求中添加特定参数吗？
• 我有一个完全错误的方法吗？

在客户端浏览器中使用 fetch api，我没有遇到 GET 或 POST 问题，但是我遇到了 fetch 和 DELETE 问题。它似乎将 DELETE 请求方法更改为 OPTIONS。

大多数研究表明是 cors 问题，但对我来说，我已经涵盖了 cors 问题。

我不确定这是否是有效的 fetch spec api 链接，但它显示：

上市方法的CORS安全是一个方法GET，HEAD或POST。

我不确定这是否意味着我不能在使用 cors 获取时使用 DELETE，这就是我遇到问题的原因？

浏览器代码：

var request =
          new Request(url, {
            credentials: 'include',
            mode: 'cors',
            method: 'DELETE'
          });

        return fetch(request)
          .then(this.fetchError.bind(this))
          .then(this.json)
          .then((response)=> {
            this.set(`uploadState.${index}.value`, false);
          })
          .catch((e) => {
            console.log(e);
          });
      },

chrome 网络标签：

Request URL:http://72.12.4.3:9000/api/v1/listings/3/47/image-3-47-1492565415145.jpeg
Request Method:OPTIONS
Status Code:401 Unauthorized
Remote Address:72.12.4.3:9000

Response Headers
view …

我在componentDidMount()React 组件的方法中有一个 fetch 请求：

const request = new Request(url, {
    mode: 'no-cors',
    method: 'get',
    headers: {
        Accept: 'application/json'
    }
});

fetch(request)
    .then(function(response) {  
        console.log('Response: ', response);

        return response.text();  
    })
    .then(function(data) {
        // _this.setState({ data: data });

        console.log('Success: ', data);
        console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
        console.log('Request failed', error);
    });

当组件加载时，我可以看到在控制台中发出请求并返回正确的数据；但是，我的 Response 对象始终为空：

Response { type: "opaque", url: "", redirected: false, status: 0, ok: false, statusText: "", headers: Headers, bodyUsed: false }

response.text()返回 null，我真的不确定发生了什么。我之前也用过同样的方法，没有出现过这个问题，所以不确定是第三方数据源的原因还是什么的不一样。

有任何想法吗？

我正在 React 中构建一个 Chrome 扩展，该扩展连接到后端的 Rails 6 应用程序。我希望 Rails 应用程序充当 API 并存储来自扩展程序的数据，但我无法让它接受来自我的扩展程序的请求。

这是我的扩展中的获取代码：

    fetch('https://www.myapp.com/api/post_comment/test', {
     method: 'get',
     headers: {'Content-Type':'application/json'}
    });

这是我在 js 控制台中不断遇到的错误：

从源“http://localhost:3000”获取“https://www.myapp.com/api/test”的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否请求的资源上存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

“https://www.myapp.com/api/test”的 FetchEvent 导致网络错误响应：将不是 Response 的对象传递给 respondWith()。

我尝试将rack-cors gem 添加到我的 Rails 应用程序中：

#Gemfile:

gem 'rack-cors'

#config/initializers/cors.rb:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '/api/*', headers: :any, methods: [:get, :post, :patch, :put]
  end
end

我还尝试在 Rails 应用程序控制器中手动添加标头：

before_action :cors_preflight_check
after_action :cors_set_access_control_headers


def cors_set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, …

我使用以下命令将 zip 文件从 Nodejs 服务器发送到浏览器

res.set("Content-Type", "application/octet-stream");
res.set("Content-disposition", `attachment; filename="`+zip_name+`.zip"`);
res.set("Content-Length", zipBuff.length);
res.send(zipBuff);

然后我使用以下方法获取它：

fetch("/my/url", {
    method: "POST",
    body: formData,
})
    .then(response => {
        return response.blob();
    })
    .then(response => {
        const blob = new Blob([response], {type: 'application/zip'});
        const downloadUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = downloadUrl;
        a.download = "blah.zip";
        document.body.appendChild(a);
        a.click();
    });

我希望能够使用zip_name而不是blah文件名，但我无法弄清楚如何Content-disposition使用fetch.

有人可以解释一下它是如何完成的吗？

在开始之前，我承认关于 SO 有几个问题听起来可能与我的标题相似，但是，我读到的所有问题都比我的代码更复杂，并且解释似乎与我的情况不相关。

有人可以帮助我了解我的代码（下面的片段）中发生了什么导致此错误的原因：

Uncaught SyntaxError:await 仅在异步函数和模块的顶层主体中有效。

据我所知，await引起错误的是在“顶级”机构中。还是说顶级机构有别的含义？多谢！

编辑以区别于此处的其他建议（类似）问题：我的问题不涉及 httpGet，其他一些上下文是不同的，最重要的是，我收到了一个为我解决问题的答案，与（单独的）中给出的建议不同）回答另一个问题。因此，虽然我已经能够在这里找到解决方案，但我相信我的问题留下来对于普通观众来说是有价值的。

var data;
await getData();
document.body.write(data);

async function getData() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
        method: 'GET',
        headers: {
          'Accept': 'application/json, text/plain, */*',
          'Content-type': 'application/json'
        }
    });
    data = await res.json();
}

我看到MDN/Response/text.text()文档上显示了仅使用的示例then

response.text().then(function (text) {
  // do something with the text response
});

它返回一个用字符串解析的承诺。

由于 lint 规则，我需要放置

// eslint-disable-next-line @typescript-eslint/no-floating-promises
res.text().then(async (t) => {

当我需要捕获被拒绝的承诺时，是否有用例Response.text()？也许一些例子？

我正在使用 abortcontroller 取消自定义反应挂钩内的获取请求，如下所示：

useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
    const fetchData = async () => {
      try {
        setState({ status: 'pending', data: null, error: null });
        const response = await fetch(url, {
          signal,
          ...options,
        });

        // if response is an HTTP error like 4XX 5XX
        if (!response.ok) {
          throw new Error(response.statusText);
        }
        // if response is 2XX
        const data = (await response.json()) as T;
        setState({ status: 'resolved', data, error: null });
      } …