标签: isomorphic-fetch-api

我在这里看到了两个不同的提取:

• https://github.com/github/fetch

• https://github.com/matthew-andrews/isomorphic-fetch

有人能告诉我两者之间的区别吗？

PS:我已经阅读了README.md,但我仍然没有得到区别.我上次检查时,Isomorphic意味着它具有相似的形式或关系.它对我来说仍然没有意义.

我正在使用npm'isomorphic-fetch'来发送请求.我遇到的问题是我无法设置请求标头的内容类型.

我设置了application/json的内容类型,但是请求标头被设置为text/plain.

import 'isomorphic-fetch';

  sendRequest(url, method, body) {
    const options = {
      method: method,
      headers:{'content-type': 'application/json'},
      mode: 'no-cors'
    };

    options.body = JSON.stringify(body);

    return fetch(url, options);
  }

当我在浏览器中检查请求时,内容类型是o:

content-type:text/plain;charset=UTF-8

任何人都可以解释为什么我无法设置此属性？

在redux-observable是否可以使用isomporphic-fetch而不是Rx.DOM.ajax？

我必须显示包含大量数据的表格.有一个分页按钮,每页显示10条记录.我有一个名为"FETCH"的按钮点击它表填充.如何在页面加载时加载我的表.

action.js

import fetch from 'isomorphic-fetch';
export const ADD_BENEFICIARY = 'ADD_BENEFICIARY';
export const REMOVE_BENEFICIARY = 'REMOVE_BENEFICIARY';

export const ADD_PLAN_TO_COMPARE = 'ADD_PLAN_COMPARE';
export const REMOVE_PLAN_FROM_COMPARE = 'REMOVE_PLAN_COMPARE';
export const SHOW_PLAN_COMPARE = 'SHOW_PLAN_COMPARE';

export const NEXT_PAGE_PLAN_LIST = 'NEXT_PAGE_PLAN_LIST';
export const PREV_PAGE_PLAN_LIST = 'PREV_PAGE_PLAN_LIST';
export const REQUEST_PAGE_PLAN_LIST = 'REQUEST_PAGE_PLAN_LIST';
export const RECEIVE_PAGE_PLAN_LIST = 'RECEIVE_PAGE_PLAN_LIST';

export const showNextPageOfPlans = () => {

  return {
    type: NEXT_PAGE_PLAN_LIST
  }
}

export const showPreviousPageOfPlans = () => {

  return {
    type: PREV_PAGE_PLAN_LIST
  }
}

export const requestPageOfPlans …

在我正在处理的这个项目中，我正在尝试使用来自 Google Places API 的照片来扩充我所拥有的公共艺术品照片集。这里表示您可以发送详细信息请求来获取十张照片的数组。最终，我将解压响应以获取每张照片的 Google照片参考，并对数组中的每张照片发出请求并显示它。

不幸的是，当我发送详细信息请求时，这个计划就中断了。这就是我收到的确切错误：

Fetch API cannot load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJ5zf5lfXKRIYR8rPafbwaL68&key=MY_API_KEY. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4040' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我从本地主机运行这个程序，我很确定这很重要。我的所有其他 API 调用（Google Maps API 和其他几个）都是按照原样编写的，所以我有点困惑为什么会收到错误。这是相关代码：

The actual API call:

export function getPhotos(placeID) {
  let obj = {
    method: 'GET'
  };
  return fetch('https://maps.googleapis.com/maps/api/place/details/json?placeid=' + placeID + '&key=MY_API_KEY')
    .then((response) …

这是一个可以正常工作的CURL示例：

curl -X POST \
  <url> \
  -H 'authorization: Bearer <token>' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -F file=@algorithm.jpg \
  -F userId=<userId>

我正在尝试使用isomorphic-fetch重现此请求。

我尝试了以下代码：

const formData = new FormData();
formData.append('file', file);
formData.append('userId', userId);

return fetch(`<url>`, {      
  method: 'POST',
  headers: {
    'Content-Length': file.length
    'Authorization: Bearer <authorization token>',
    'Content-Type': 'multipart/form-data'
  },
  body: formData
})`

我使用fs.readFileSync来生成file传递给FormData。

上一个示例返回401HTTP状态代码（未经授权），并显示一条错误消息，指出userId令牌中的嵌入内容（通过标头发送）与userId从中传递的不匹配formData。

因此，我怀疑FormData到达REST API的格式不正确。

该问题可能与Content-Length标头有关，但是我没有找到更好的方法来计算它（如果不使用Content-Length标头，则会丢失411 …

isomorphic-fetch在React Native应用程序中添加节点模块(版本:^ 2.2.1)后,我收到错误Can't find variable: self.
这里我附上了截图.

从位于node_modules> isomorphic-fetch>的文件中抛出错误fetch-npm-browserify.js.
以下是该文件的代码.

// the whatwg-fetch polyfill installs the fetch() function
// on the global object (window or self)
//
// Return that as the export for use in Webpack, Browserify etc.
require('whatwg-fetch');
module.exports = self.fetch.bind(self);

我的目标是使用AJAX调用（通过使用访存API）构建Typescript库，客户端（Webpack / Browserify）和后端开发人员（Node）都可以使用它。

但是，我似乎无法毫无错误地fetch进行编译。

我的第一次尝试是isomorphic-fetch和@types/isomorphic-fetch。我不确定类型是否完整，但是它们没有带来任何全局变量（它们应该带来访存，不是吗？）。

npm i isomorphic-fetch @types/isomorphic-fetch

索引

import 'isomorphic-fetch';
export function execute() {
  return fetch('...') ...
}

tsconfig.json

"compilerOptions": {
  ...
  "lib": ["es2015", "es2016", "es2017"]
}

输出：

node_modules/@types/isomorphic-fetch/index.d.ts(8,30): error TS2304: Cannot find name 'fetch'.
src/index.ts(4,25): error TS2304: Cannot find name 'fetch'.

我需要“ dom”吗？显然，使用domlib可以同时编译和运行这两个函数，但是我无法控制它是否真的可以在Node上运行。我的意思是，它将编译是否为I import 'isomorphic-fetch'，但是如果我错过了，它将在Node上失败而无需通知。

另外，dom无论我也要支持浏览器，Node都不是“ ”。

我的第二次尝试是与whatwg-fetch。 …

我是ReactJS的新手,并且有点理解这个问题与SOF中的数字问题重复.

但我希望有人可以就React的一些概念给我一些指示和澄清.

我想要做的只是使用axios或isomorphic-fetch在加载屏幕之前从远程REST API获取数据.

但是,我看到了很多类似的React教程,我仍然没有明白这一点.

这是我的代码:

import React, { Component } from 'react';
import axios from 'axios'

// import InputRow from './components/InputRow';
import './App.css';

// require('es6-promise').polyfill();
// require('isomorphic-fetch');

class App extends Component {

	constructor(props) {
		super(props);

		const app_id = '<my_app_id>';

		const version = 0.1;
		this.luisURL = `https://westus.api.cognitive.microsoft.com/luis/api/v2.0/apps/${app_id}/versions/${version}`;

		// this.getLUISIntent = this.getLUISIntent.bind(this);

		this.state = {
			intentOptions: [],
			utterance: '',
			intent: ''
		};
	}

	getLUISIntent = () => {
		const subscription_key = '<my_subscription_key>';

		const URL = this.luisURL + …

我想覆盖isomorphic-fetch的fetch()方法，这样，就在发送此请求之前，它调用并在请求完成后调用. 现在我想覆盖它，以便可以像原始 fetch 方法一样链接新的 fetch。所以它应该尊重/转发所有的承诺。总之，我想：showLoader()hideLoader()

• 覆盖原来的fetch()成fetchPlus(extraArg)
• fetchPlus()需要在调用之前fetch()和fetch()完成之后做额外的工作。
• fetchPlus() 应该是原始用法的替代品 fetch()
• 它应该支持链接，以便我可以：

fetchPlus(extraArg, originalArgs...).then(response => {...}).catch(error => {...});

我对 JS、React 和 Redux 还很陌生，所以如果我错过了一些明显的东西，请原谅。我确实阅读fetch()并知道它返回Promise以便可以进一步传递响应或处理错误。我找到了一种丑陋的方法，我将 responseHandler 和 errorHandler 函数作为参数传递给 fetchPlus。

fetchPlus(extraArg, url, options, responseHandler, errorHandler) {
    showLoader(extraArg);
    fetch(url, options)
    .then(response => {
        hideLoader(extraArg);
        responseHandler(response);
    }.catch(error => { errorHandler(error); });
}

但我觉得不干净。我想看看我是否可以找到正确传递 Promise 的原始 fetch 的替代品。

我将不胜感激任何帮助！

我正在尝试从Storm Glass API中获取数据。我正在使用他们的模板提取请求（https://docs.stormglass.io/?javascript#point-request）。

当我运行脚本时，控制台会Promise { <pending> }无限期读出“ ”。因此，请求未返回值，但我无法弄清楚原因。有任何想法吗？

我已将我的API密钥替换为 <My API key>

const http = require('http')
const fetch = require('isomorphic-fetch');

http.createServer((req, res) => {

////////////////////////////////////////////////App code
const lat = 58.7984;
const lng = 17.8081;
const params = 'waveHeight,airTemperature';

fetch(`https://api.stormglass.io/point?lat=${lat}&lng=${lng}&params=${params}`, {
  headers: {
    'Authorization': '<My API key>'
  }
}).then(function(response) {
  // Do something with response data.
  const jsonData = response.json();
  console.log(jsonData)
});

/////////////////////////////////////////////////////////
}).listen(3000);

console.log("service running on http://localhost:3000");

首先，我确保为我在这里讨论的问题编写一个快速演示https://codesandbox.io/s/exciting-swirles-7cs3s

但本质上，使用该isomorphic-fetch库，我遇到了一个问题，我无法真正获得该函数的值，或者你可能会说，分辨率fetch()。

import fetch from "isomorphic-fetch";

async function test() {
  return await fetch("https://google.com", { mode: "no-cors" });
}

let t = test();
console.log(t);

其结果是

fetch()现在我也考虑了像这样的其他使用方式

fetch("https://google.com", { mode: "no-cors" })
  .then(response => response.text())
  .then(data => console.log(data));

它实际上传递了一个字符串，但如果可能的话，我更喜欢用第一种方法？我也很可能没有正确使用 fetch。

在阅读 Routing API 中的 Next.Js 教程时，我了解了如何使用这 2 个库获取数据。

来自 Isomorphic-unfetch 的 fetch 对象在 getInitialProps 异步函数中用于调用外部 API。然后在路由 API 部分，SWR 和 { useRouter } 来自 'next/router; 塑造对在同一个 Next.Js 服务器中开发的内部 API 的调用，具有很大的灵活性来查询 req 参数。

除了这两个方面，这两种方法之间还有什么其他区别？