-
-
Save msmfsd/fca50ab095b795eb39739e8c4357a808 to your computer and use it in GitHub Desktop.
// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/ | |
// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch | |
// async function | |
async function fetchAsync () { | |
// await response of fetch call | |
let response = await fetch('https://api.github.com'); | |
// only proceed once promise is resolved | |
let data = await response.json(); | |
// only proceed once second promise is resolved | |
return data; | |
} | |
// trigger async function | |
// log response or catch error of fetch promise | |
fetchAsync() | |
.then(data => console.log(data)) | |
.catch(reason => console.log(reason.message)) |
I came up to a similar use of
fetch
, but how are you dealing with errors?async function async_fetch(url) { let response = await fetch(url) if (response.ok) return await response.json() throw new Error(response.status) }
In addition to use try .... catch blocks, it is better to put the above code (by @gengns) inside the try block because "The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing." (quoted from https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
can u please tell me how to solve this
./src/useGoogleSearch.js
SyntaxError: /media/g/g-c/src/useGoogleSearch.js: Unterminated string constant (11:8)
9 | const fetchData = async () => {
10 | fetch(
11 | 'https://www.googleapis.com/customsearch/v1?key=$
| ^
12 | {API_KEY}&cx=${CONTEXT_KEY}&q=${term}'
13 | )
14 | .then(response => response.json())
@michaelnagy or use a fat arrow if you want to be fancy ;)
const fetchAsyncA = async () => await (await fetch('https://api.github.com')).json()
As far as I can tell it's not possible to use the returned data in this case. Let me know if I'm missing something.
Even more fancy :)
import fetch from 'node-fetch'
export default async (...args) => await fetch(...args)
I want to execute a synchronous json fetch call. The following code (see below). It works in principle, but not in the expected order (not synchronously, but asynchronously again).
My log expectation is 1 2 3 4 5 6 7, but I get 1 2 3 7 4 5 6
How do I meet my expectation?
console.log("1 start");
async function fetchInfo() {
let url = `https://reqres.in/api/products/3`; // only for test
console.log(" 3 fetch");
let response = await fetch(url);
console.log(" 4 response");
let data = await response.json()
console.log(" 5 return");
return data;
}
console.log("2 call fetchInfo()")
fetchInfo()
.then(data => console.log("6 response object: ...", data));
console.log("7 end / more code ...");
// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/
// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch
// async function
async function fetchAsync () {
// await response of fetch call
let response = await fetch('https://api.github.com');
// only proceed once promise is resolved
let data = await response.json();
// only proceed once second promise is resolved
return data;
}
// trigger async function
// log response or catch error of fetch promise
use a closure.