标签: fetch-api

我试图打印出 Fetch 承诺的值，但它undefined在我 console.log 时显示。

当我在 Postman 中尝试时，Php 服务器使用 http 正文中的 jwt 令牌响应此获取。

 fetch("http://localhost:8001/api/login", {
                        method: 'post',
                        headers: {
                            "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
                       },
                        body: 'username=' + this.state.username + '&password=' + this.state.password
                    })
                        .then(function (responseObject) {
                            console.log('Request succeeded with Response object', responseObject);

                        })
                        .then(function (result){
                            console.log(result);
                        })
                        .catch(function (error) {
                            console.log('Request failed', error);
                        });
                }else{
                    console.log('You must enter username, password.');
                }

因此，为了不让任何人对背景故事感到厌烦，我需要从许多 API 访问数据才能运行我的脚本。在执行脚本之前需要加载所有数据，我通常很乐意这样做：我只需声明一些获取请求，编写 Promise.all，然后继续执行该函数。

然而，我遇到了某个 API 的问题，该 API 将我可以从一个请求提取的结果数量限制为 100 个，并且我需要查询所有结果。我认为这没什么大不了的，因为我想我可以通过在请求末尾附加“&page=X”来提出几个额外的请求。

那么，计划是从 API 请求页面总数，然后将其输入到 for 循环中，以将多个获取请求推送到 Promise 数组中（即 link://to/api/data&page=1 、link://to/api/data&page=2 等）。然而，当我实际尝试使用 for 循环创建此数组时，该数组返回空。这是我的工作：

const dataUrlNoPage = 'link/to/api/data&page=';
const totalPages = 3; //usually pulled via a function, but just using a static # for now

let apiRequestLoop = function(inp) {
  return new Promise(function(resolve){
    let promiseArray = [];
    for (let i = 1; i <= inp; i++) {
      let dataUrlLoop = dataUrlNoPage + i;
      fetch(dataUrlLoop).then(function(response){
        promiseArray.push(response.json());
      })
     }
    resolve(promiseArray);
  })
}

let …

在 React Native 中，我有以下内容：

import React, { Component }                                         from 'react';
import PropTypes                                                    from 'prop-types';
import { StyleSheet, Text, View, TouchableHighlight }               from 'react-native';
import Immutable                                                    from 'immutable';

const styles = StyleSheet.create({
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: '20%',
  },
});

export default class VirtualFenceBottom extends Component {

  constructor(props) {
    super(props);
    this.state = { markers: this.props.markers  };
  }

  populateMarkers = () => {
    let markersVar = this.state.markers;
    fetch('http://localhost:8080/virtualFence', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json' …

我正在使用 fetch api 通过 javascript 读取 txt 文件。我想加载由数组中的新行分隔的 txt 文件的内容。

文本文件：

A
B
C

我需要以下格式：

arr = ["A", "B", "C"]

下面是我试过的代码

var arr = []
fetch('file.txt')
  .then(function(response) {
    return response.text();
  }).then(function(text) {
arr.push(text)
console.log(text)

    });
  console.log(arr)

没有任何内容添加到我的数组中，但是文本文件中的数据会打印在控制台上。

如果我fetch()在一个Promise.all块内有多个调用，当一个调用失败时，它都会失败。太好了，我需要他们全部解决。

但是，我如何才能找到哪个实际上失败了？

在下面的代码中，catch error告诉我：

类型错误：无法获取`

如果我选择这样做，则无法构建有效的用户错误消息。

const goodUrl = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
const badUrl = 'https://ajax.googleapis77.com/ajax/libs/jquery/2.1.3/jquery.min.js';
Promise.all([
    fetch(goodUrl),
    fetch(badUrl), /* will fail */
    fetch(goodUrl)
]).then(([response1, response2, response3]) => {
    console.log(response1);
    console.log(response2);
    console.log(response3);
}).catch((err) => {
    console.log(err);
});

这是一个小提琴（一个片段不太好）

我寻找了重复项，这不是一个，因为示例抛出了相同的错误

我正在尝试使用 Google Maps API 计算两个地点之间的预计旅行时间。我通过以下方式索取数据：

const Url = \'https://maps.googleapis.com/maps/api/distancematrix/json?origins=25.7694708,-80.259947&destinations=25.768915,-80.254659&key=\' + API_KEY;\ntry {\n  const response = await fetch(Url);\n  console.log(response);\n  const data = await response.json();\n  console.log(data.rows);\n} catch(e){\n  console.log(e);\n}\n

问题是在浏览器控制台中我收到错误：

TypeError: NetworkError when attempting to fetch resource\n

它还向我显示了一个警告：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.googleapis.com/maps/api/distancematrix/json?origins=25.7694708,-80.259947&destinations=25.768915,-80.254659&key=API_KEY. (Reason: CORS header \xe2\x80\x98Access-Control-Allow-Origin\xe2\x80\x99 missing).\n

但是当我查看网络部分的控制台时，它显示调用已成功完成，并且显示以下 json：

{\n   "destination_addresses" : [ "3670 SW 3rd St, Miami, FL 33135, USA" ],\n   "origin_addresses" : [ "3911 …

我对一个特定问题感到困惑。我正在尝试使用 fetch api 设置 cookie，但我无法这样做。

static deleteorder = (domain = "http://localhost:8080/pc", order) => {

  let cooks = "JSESSIONID=AFAFWEEVV2323GG";
  fetch(deleteorder, {
      method: `GET`,
      credentials: 'same-origin',
      headers: {
        "Content-type": `application/x-www-form-urlencoded`,
      },

    })
    .then(res => {
      console.log(res.status);
    })
    .catch(error => {
      console.log(error);
    });
};
}

当函数运行并200返回但数据保持不变时，意味着顺序保持不变。你们中的一个人能透露一下吗？我正处于学习 fetch api 的初级阶段，因此我们将不胜感激任何反馈。

我正在尝试使用 google Drive Rest api 在浏览器中下载用户图像，但我似乎无法获取实际的图像数据。我能够成功调用文件端点，但我不知道如何处理响应。

我的获取请求：

fetch(`https://www.googleapis.com/drive/v3/files/${fileId}?key=${driveInfo.key}`, settings)
    .then(res => {
      return res.json();
    })
    .then(json => {
      console.log("drive json", json);
    });

其输出：

drive json
{
kind: "drive#file"
id: "1qXXBU6oIxs2Y4PZskA-kj6ljMjTfGKjf"
name: "Screenshot_20180919-160538.png"
mimeType: "image/png"
}

我还注意到这response.body很棒ReadableStream<Uint8Array>，因为我最终需要一个 uint8 数组，但看起来 uint8 数组代表上述元数据而不是实际的图像数据。

我是否以正确的方式进行此操作，或者我是否尝试在客户端下载图像？

我目前正在使用一个不返回 JSON 的 API。为了解决这个问题，我获取响应并将其推送到一个数组（同时对其进行格式化以删除任何缩进并拆分响应中的每个数字）。然后，我使用这个包含 183 个数字的数组，并对包含 183 个字符的数组运行 for 循环，以根据响应生成一个对象（具有自定义键值对）。

当我开始使用 HTML 中的数据时，事情变得令人困惑。通常你可以直接说<p>{data.overallRank}</p>，但我收到了对象未定义的错误。这是有道理的，因为 是data = {}在函数运行之前才创建的。

在寻找解决方案后，我遇到了苗条的等待块。您可以在这里阅读它们并查看教程：https ://svelte.dev/tutorial/await-blocks

在尝试实现此功能后，我有以下代码：

let playerStats = []
    let proxy = "https://cors-anywhere.herokuapp.com/"
    let url =  proxy + "https://secure.runescape.com/m=hiscore_oldschool/index_lite.ws?player=Hess"
    const data = {};
    
    let promise = getPlayer();
    async function getPlayer() {
        return await fetch(url).then((response) => response.text())
            .then((data) => {
                return data;
            });
        }

getPlayer().then((playerData) => {
// format data
  playerStats.push(playerData.replace(/\n/ig, ",").split(','));
  console.log(playerStats);

// Begin object generation
// names array shortened
let …

我想从 github 的 graphql api 检索数据，但我不断收到错误消息： { message: 'This endpoint requires you to be authenticated.', documentation_url: 'https://docs.github.com/v3/#authentication' } 尽管使用了令牌，但我什至生成了一个新令牌来查看另一个令牌是否已损坏。可以在https://repl.it/@DukeSanmi/AcrobaticModernLanguage#index.js找到获取数据的脚本 可能是什么问题？