Javascript ES6 `fetch 未定义`
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36484156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ES6 `fetch is undefined`
提问by Pablo
I'm building a site with ES6 and Babel.
我正在用 ES6 和 Babel 构建一个站点。
In a script file, I need to make an ajax call to a service on server. For that I'm doing like this:
在脚本文件中，我需要对服务器上的服务进行 ajax 调用。为此，我这样做：
fetch('url').then(
response => response.json()
).then(
supervisoryItems => doSomething(supervisoryItems)
)
In Google Chrome this works just fine, but it does not work on Firefox or IE (I'm getting the error fetch is undefined).
Searching on Google I found this should fix it:
在谷歌浏览器中这工作得很好，但它在 Firefox 或 IE 上不起作用（我收到错误fetch is undefined）。在 Google 上搜索我发现这应该可以解决它：
import promise from 'es6-promise'
promise.polyfill()
Sadly it does not change anything, I have the same issue. Any help?
可悲的是它没有改变任何东西，我有同样的问题。有什么帮助吗？
回答by Kieran Johnson
You need to add the 'isomorphic-fetch' module to your 'package.json' and then import this.
您需要将 'isomorphic-fetch' 模块添加到您的 'package.json' 中，然后导入它。
npm install --save isomorphic-fetch es6-promise
Then in your code
然后在你的代码中
import "isomorphic-fetch"
回答by Thomas
I will use the two following cdn like this:
我将像这样使用以下两个cdn：
<script src="//cdn.jsdelivr.net/bluebird/3.5.0/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
回答by hzoo
Babel-polyfill (http://babeljs.io/#polyfill) currently doesn't include fetch in the polyfill. I was thinking of adding it though.
Babel-polyfill ( http://babeljs.io/#polyfill) 目前在 polyfill 中不包含 fetch。虽然我想添加它。
But yeah can use https://github.com/github/fetch
但是是的可以使用https://github.com/github/fetch
回答by Scott Martin
You can also use Webpack's ProvidePluginwith the imports-loaderand exports-loaderpackages as described in this answer, which removes the need to import anything in your code:
您还可以使用的WebPack的ProvidePlugin与进口装载机和出口装载机中所描述的包这个答案，它不需要在代码中输入任何东西：
config.plugins = [
new webpack.ProvidePlugin({
'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
})
];
At the time of writing there's a compatibility issue with the 3.0.0 version of whatwg-fetch. The workaround is using the following:
在撰写本文时，存在与 3.0.0 版本的兼容性问题whatwg-fetch。解决方法是使用以下方法：
new webpack.ProvidePlugin({
fetch: 'exports-loader?self.fetch!whatwg-fetch/dist/fetch.umd'
})
回答by Sahil Shikalgar
There is browser support for every new functionality added in Javascript. You can see browser support on https://caniuse.com/#feat=fetch
Javascript 中添加的每个新功能都有浏览器支持。您可以在https://caniuse.com/#feat=fetch上查看浏览器支持
Follow the following 2 steps to use fetch on IE11
按照以下 2 个步骤在 IE11 上使用 fetch
Step 1: Install 3 packages
第 1 步：安装 3 个软件包
npm i whatwg-fetch @babel/polyfill es6-promise --save
npm i whatwg-fetch @babel/polyfill es6-promise --save
@babel/polyfill - to use polyfill in babel
@babel/polyfill - 在 babel 中使用 polyfill
whatwg-fetch - includes fetch functionality
whatwg-fetch - 包括获取功能
es6-promise - fetch polyfill includes promise which is also not supported by IE11
es6-promise - fetch polyfill 包含 IE11 也不支持的 promise
Step 2: Add Entry Point in webpack.config
第 2 步：在 webpack.config 中添加入口点
entry: [ "whatwg-fetch", "@babel/polyfill", "./src/js/index.js"]
条目：[“whatwg-fetch”，“@babel/polyfill”，“./src/js/index.js”]
require("es6-promise").polyfill();
const config = {
entry: [ "whatwg-fetch", "@babel/polyfill", "./src/js/index.js"],
output: {
filename: 'bundle.js'
},
module: {
rules : [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
module.exports = config;
回答by pom421
I prefer to use isomorphic-unfetchinstead of isomorphic-fetch, because it is able to work like a ponyfilland not a polyfill.
我更喜欢使用isomorphic-unfetch而不是isomorphic-fetch，因为它能够像ponyfill而不是polyfill一样工作。
The difference is that it doesn't affect the rest of code and it is more transparent of the dependencies you have.
不同之处在于它不会影响其余代码，并且对您拥有的依赖项更加透明。
Install:
安装：
yarn add isomorphic-unfetch
Usage:
用法：
// using ES6 modules
import fetch from 'isomorphic-unfetch';
// using CommonJS modules
var fetch = require('isomorphic-unfetch');
回答by Salvatore
Just went through this last night. In the end, after trying all sorts of things, the solution was fairly simple:
昨晚刚刚经历了这个。最后，在尝试了各种方法之后，解决方案相当简单：
fetch('url').then(
response => response.json()
).then(
supervisoryItem => doSomething(supervisoryItem)
)
became
变成了
window.fetch('url').then(
response => response.json()
).then(
supervisoryItem => doSomething(supervisoryItem)
)
TL;DR fetch(stuff) should be window.fetch(stuff) EDITThis worked for me on Chrome
TL;DR fetch(stuff) 应该是window.fetch(stuff)编辑这对我在 Chrome 上有用
回答by parkerproject
Window.fetch or fetch is the same... technically fetch() is a global method of the Window object
Window.fetch 或 fetch 是一样的...技术上 fetch() 是 Window 对象的全局方法
