3

First things first, I made sure to write a quick demo of the issue I'm talking about here https://codesandbox.io/s/exciting-swirles-7cs3s

But essentially, using the isomorphic-fetch library, I'm running into an issue where I can't really get the value, or you might say, resolution, of the fetch() function.

import fetch from "isomorphic-fetch";

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

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

The outcome of which is

enter image description here

Now I've also considered the other way of using fetch() like this

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

which actually delivers a string, but I prefer doing it the first way, if possible? It's also very possible I'm not using fetch correctly.

notacorn
  • 3,526
  • 4
  • 30
  • 60

3 Answers3

5

Try it like this:

import fetch from "isomorphic-fetch";

async function test() {
  const response = await fetch("https://google.com", { mode: "no-cors" });
  return response.text();
}
async function main() {
  let t = await test();
  console.log(t);
}
main();

You need to await the promise, and that means you need an async function.

see sharper
  • 11,505
  • 8
  • 46
  • 65
  • do most programmers avoid this syntax? it seems a bit over the top to write two async functions to block? + return the output of just one request. i just want to do what's best practice – notacorn Jul 21 '20 at 04:49
  • 1
    @notacorn if you're within an `async` function, you can use `await`. If not, you use `then()`. – Phil Jul 21 '20 at 04:50
  • 2
    Choose your poison @notacorn. .thens are awkward, but the only alternative is async-await, which requires the wrapping function. In this case you could of course just collapse the two functions into one. – see sharper Jul 21 '20 at 04:53
  • i actually found an interesting article written on this topic (which i wouldnt have known how to google for without your help). https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9 @seesharper – notacorn Jul 21 '20 at 05:08
  • 1
    Good summary, and fun fact, it was Microsoft's C# team that invented this syntax. – see sharper Jul 21 '20 at 05:29
0

fetch will return a promise, not a string. In your second example you call .text() on it. You will have to do something similar in asyc/await

CygnusOlor
  • 94
  • 4
  • even when I pass the outcome of `await fetch` into a variable and then return it with `text()` it still console logs as a pending promise – notacorn Jul 21 '20 at 04:42
0

Use t.then(res => console.log(res)); it will return response object.

As you have async function test and you are not awaiting it like await test() so it will return promise.

As per your comment you should be using await test(). But you can only use await inside async so I suggest to use wrapper function like below.

import fetch from "isomorphic-fetch";

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

async function wrapper() {  
  let t = await test();
  console.log(t.text());
}

wrapper();
Karan
  • 12,059
  • 3
  • 24
  • 40
  • i think you fundamentally misunderstood and didn't read my question - first of all im trying to get the `text()` out of it, and second in my question I already show I know this syntax but I want to know how to do it the other way – notacorn Jul 21 '20 at 04:43