I am using this <res.write()> ==> https://nodejs.org/api/http.html#responsewritechunk-encoding-callback (in nodejs) and using this fetch ==> https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

My situation is that I didn't see any response when using the res.write() function inside of the fetch function. for example, in the below backend code, I tried to put res.write("456") inside of the first then function below fetch, but I only see 123 returned in the frontend, no 456.

res.write("123");
fetch('http://example.com/movies.json')
  .then((response) => {response.json(), res.write("456")})
  .then((data) => console.log(data));

I have searched Google for a while, but didn't see anything related. My guess is that this could be because of async usage. appreciate if someone can give suggestions.

===== update =====

res is express's res obj

async sendText(res: Response){
    res.write("123")
    fetch('http://example.com/movies.json')
        .then((response) => {return response.json()})
        .then((data) => {
            console.log(data);
            res.write('456');
            res.end();
        });

}

seeing behavior: only see 123 in the frontend.

VS

async sendText(res: Response){
    res.write("123")
    await fetch('http://example.com/movies.json')
        .then((response) => {return response.json()})
        .then((data) => {
            console.log(data);
            res.write('456');
            res.end();
        });

}

seeing behavior: can see both 123 and 456 in the frontend.

I never use await and .then together before, not fully understand the difference. searching the web rn.

CodePudding user response：

You aren't checking for any errors or an unsuccessful response so response.json() may be failing, preventing anything after it from executing.

Something like this should work better for you

async sendText (res: Response) {
  res.write("123");

  const response = await fetch("http://example.com/movies.json");

  // check for an unsuccessful response
  if (!response.ok) {
    const error = new Error(`${response.status} ${response.statusText}`);
    error.text = await response.text();
    throw error;
  }

  const data = await response.json();
  res.write("456");
  res.end(); // finalise the HTTP response

  console.log(data); // log data for some reason ¯\_(ツ)_/¯
};

This will return a promise that resolves with undefined or rejects with either a networking error, HTTP error or JSON parsing error.

When calling it, you should handle any rejections accordingly

app.get("/some/route", async (res, res, next) => {
  try {
    await sendText(res);
  } catch (err) {
    console.error(err, err.text);
    next(err); // or perhaps `res.status(500).send(err)`
  }
});

I never use await and .then together before

Nor should you. It only leads to confusing code.