fetch

The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
​https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch​
Using in Browsers
Not supported on all browsers. You can polyfill using watchwg-fetch
​https://npmcompare.com/compare/node-fetch,whatwg-fetch​
Using in Node.js
​https://www.npmjs.com/package/node-fetch​
yarn add node-fetch
Importing:
fetch-import-success.ts
import fetch from 'node-fetch';
If you use webpack, the following will work locally, but fail when deployed in webpack.
fetch-webpack-import-fail.ts
import * as fetch from 'node-fetch';
Text:
fetch-text.ts
const response = await fetch(url);
console.log(response);
const text = await response.text();
response:
fetch-text-response.ts
{
  ok true,
  status: 200,
  ...
}
JSON:
fetch-json.ts
const response = await fetch(url);
const json = await response.json();
Errors Handling
No errors are thrown.
No need for try/catch
fetch-error.ts
const response = await fetch(url);
console.log(response);
if (!response.ok) {
  ...
}
response:
fetch-error-response.json
{
  ok false,
  status: 404,
}
Cons/Dislikes
Map
Last updated 2 years ago