标签: fetch-api

有没有办法使用 cloudflare 工作人员执行服务器端事件？我只找到了一种方法，但它会在返回响应后立即停止。

    const { readable, writable } = new TransformStream();
    const response = {
      headers: new Headers({
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
        Connection: 'keep-alive',
      }),
      status: 101
    };

    setInterval(() => {
      const encoder = new TextEncoder();
      const writer = writable.getWriter();
      writer.write(encoder.encode(`data: hello\n\n`));
    }, 5000);

    return new Response(readable, response);

我创建了这个 React 应用程序来练习 fetch API。但是，在编写代码以通过map方法在浏览器上显示数据时，我收到错误消息“TypeError：profile.map不是函数”。下面是代码：

import React, { Fragment, useEffect, useState } from "react";
import "./App.css";

function App() {
  // https://reqres.in/api/users
  const [profile, setProfile] = useState([]);
  const [loading, setLoading] = useState(false);

  const getProfile = async () => {
    setLoading(true);
    const response = await fetch("https://reqres.in/api/users");
    const data = await response.json();
    setProfile(data);
    setLoading(false);
  };

  useEffect(() => {
    getProfile();
  }, []);

  return (
    <Fragment>
      <h1>React fetch</h1>
      <div className="main">
        <section className="section">
          <h2>Get database</h2>
          <div>
            {loading ? (
              <Fragment>loading..</Fragment>
            ) : (
              profile.map(i => { …

我只是想学习 JavaScript。我必须为学校创建一个网络应用程序。现在我正在尝试从自己编写的 api 中获取数据。后端是用express编写的，前端是用JavaScript编写的。我有一个概述页面，其中显示了所有产品。单击详细信息按钮后，用户应该能够查看所选产品的详细信息。为此，我使用这段代码。

import React, { useState, useEffect } from "react";\nimport "./Articles.css";\n\nfunction ArticleDetail({ match }) {\n  useEffect(() => {\n    fetchArticle();\n  }, []);\n\n  const [article, setArticle] = useState([]);\n\n  async function fetchArticle() {\n    try {\n      const response = await fetch(\n        `http://localhost:8000/api/articles/${match.params.id}`\n      );\n      const article = await response.json();\n      //console.log(data.results);\n      console.log(article);\n      setArticle(article);\n      return article;\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  return (\n    <div>\n      <p>TEST</p>\n      <p>{article.articles.pk_article_nr}</p>\n      <p>TEST</p>\n    </div>\n  );\n}\n\nexport default ArticleDetail;\n

如果我运行此代码并且自己不刷新页面，则会显示正确的值（pk_article_nr）。如果我手动刷新浏览器，则会出现此错误

\n

类型错误：无法读取未定义的属性（读取“pk_article_nr”）

\n

该数据显示在控制台中：

{articles: {\xe2\x80\xa6}}\n …

我在 useEffect 钩子中使用了async作为匿名函数。我这样做是为了等待我正在获取的响应。虽然这工作正常，但我在网络上的某个地方读到，在 useEffect 挂钩内编写 async wait 是一种不好的做法，这样没有任何适当的解释。所以只是想问一下大家这是一个好的做法还是坏的做法。如果这是一个不好的做法，那么在 useEffect 中这样编写 async wait 有什么缺点，并且还想知道替代方案。非常感谢您的时间和帮助。

import { useEffect, useState } from "react";

export default function FetchPractice() {
  const [apiData, setApiData] = useState([]);

  useEffect(async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    setApiData(data);
  });

  return (
    <>
      {apiData.map((post) => (
        <div
          key={post.id}
          style={{
            border: "1px solid black",
            margin: "16px",
            padding: "16px",
            backgroundColor: "#2d2d2d",
            color: "white",
            fontWeight: "bold",
          }}
        >
          {JSON.stringify(post)}
        </div>
      ))}
    </> …

我目前正在学习 Web 开发并接触到 HTTP。让我困惑的一件事是如何准确地发出 HTTP 请求。在我观看的视频中，他们发送 HTTP 请求的主要方式是通过表单元素。做了更多研究，我还发现 HTTP 请求可以通过 Fetch 和 XMLHttpRequest 手动完成。

所以我对这三种方法如何工作以及选择其中一种的好处有点困惑。如果我犯了任何错误，我深表歉意，但我对整个问题很困惑。我尝试使用 Fetch 手动发送 HTTP 请求，例如 PUT 和 POST，但这有点混乱。大多数教程都是使用表单元素来执行此操作，所以现在我想知道是否应该这样做。

我还阅读了通过 JavaScript 发送表单，但它完全超出了我的理解范围。

因此，我尝试查找各种​​教程和网站来解释使用 HTML/CSS 和 Javascript 进行 HTTP 请求的问题。我希望有人能解释 Forms、Fetch 和 XMLHttpRequest 之间的区别。如果在这种情况下适用的话，使用其中一种与另一种相比有何权衡。

在谷歌C​​hrome控制台旁边的HTTP状态代码Request我们有信息(from ServiceWorker).

可以Request知道这Response来自ServiceWorker？比较date从Response Headers可能？

我在 React Native 中有登录功能，我尝试在其中获取数据。功能如下：

onLogin: function() {  //
        const self = this;
        self.setState({modalVisible: true, modalMessage: 'Signing in'});
        fetch('http://psa.autralis.com/manager/api/v1/obtain-auth-token/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: self.state.username,
                password: self.state.password,
            })
        })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch((error) => {
                console.warn(error);
            });
    },

但由于某种原因，它不适用于ios。我收到一个错误：

在 android 上它可以工作，我用邮递员对其进行了测试，它也可以工作。

任何的想法？

我用过

const response =await fetch('https://facebook.github.io/react-native/movies.json');
const json= await response.json();
console.log(json.result);

用于打印获取的json数据到控制台，但无法正常工作。如何将获取的数据直接写入控制台。

我正在尝试使用Fetch API从表单中检索数据并将其邮寄，但是我收到的电子邮件为空。响应似乎成功，但未发送任何数据。我究竟做错了什么？

这是我的JS代码和我的php / html代码段（如果相关）

(function() {

  const submitBtn = document.querySelector('#submit');

  submitBtn.addEventListener('click', postData);

  function postData(e) {
    e.preventDefault();

    const first_name = document.querySelector('#name').value;
    const email = document.querySelector('#email').value;
    const message = document.querySelector('#msg').value;

    fetch('process.php', {
        method: 'POST',
        body: JSON.stringify({first_name:first_name, email:email, message:message})
    }).then(function (response) {
      console.log(response);
      return response.json();
    }).then(function(data) {
      console.log(data);
      // Success
    });

  }

})();



<!-- begin snippet: js hide: false console: true babel: false -->

<?php 
    $to = "example@mail.com"; 
    $first_name = $_POST['first_name'];
    $from = $_POST['email']; 
    $message = $_POST['message'];
    $subject = "Test Email";
    $message …

最近我从JQuery.ajax切换到Fetch API,我不确定fetch API属于新的ES6标准还是H5标准？