'await' has no effect on the type of this expression

Question

I searched about this but I didn't find anything specific for what I need. If there is one, please, share here.

I'm trying to create a generic service to be called in various components. Since it's a function that requests data from an external source, I need to treat it as an asynchronous function. Problem is, the editor returns the message "'await' has no effect on the type of this expression". And the app indeed crashes since there is no data yet.

People.js calls the service requests.js

import React, { useEffect, useState } from "react";
import requests from "../services/requests";

export default () => {

   // State
   const [ people, setPeople ] = useState({ count: null, next: null, previous: null, results: [] });

   // Tarefas iniciais
   useEffect(() => {
       carregarpeople(1);
   }, []);

   // Carregando os dados da API
   const carregarpeople = async (pageIndex) => {
       const peopleResponse = await requests("people", pageIndex);

       // This line below needs to be executed but it crashes the app since I need to populate it with the data from the function requests
       // setPeople(peopleResponse);
   }


   return (
       <div>
       {
           people.results.length > 0 ? (
               <ul>
                   {
                       people.results.map(person => <li key = { person.name }>{ person.name }</li>)
                   }
               </ul>    
           ) : <div>Loading...</div>
       }
       </div>
   )
  }

And this is requests.js, where it returns the json from API

export default (type, id) => {
console.table([ type, id ]);

fetch(`https://swapi.co/api/${type}/?page=${id}`)

.then(response => response.json())
.then(json => {
    console.log(json);
    return json;
})}

Answer 1

await is only useful if you use it with a promise, but requests does not return a promise. It doesn't have a return statement at all, so it's implicitly returning undefined.

Looks like you meant for it to return a promise, so here's your code with the return added in:

export default (type, id) => {
  console.table([ type, id ]);
  return fetch(`https://swapi.co/api/${type}/?page=${id}`)
    .then(response => response.json())
    .then(json => {
      console.log(json);
      return json;
    })
}

p.s, if you prefer to do this using async/await, it would look like:

export default async (type, id) => {
  console.table([ type, id ]);
  const response = await fetch(`https://swapi.co/api/${type}/?page=${id}`);
  const json = await response.json();
  console.log(json);
  return json;
}

Answer 2

我收到此错误只是因为我的 JSDoc 评论不正确。

例如，我有一个具有以下async功能的函数@returns {string}：

  /**
   * Fetch from the swapi API
   *
   * @param {string} type
   * @param {string} id
   * @returns {string} JSON
   */
  export default async (type, id) => {
    console.table([ type, id ]);
    const response = await fetch(`https://swapi.co/api/${type}/?page=${id}`);
    const json = await response.json();
    console.log(json);
    return json;
  }

我收到了“'await' 对该表达式的类型没有影响”警告 - 但该函数看起来是正确的。

但是，一旦我将 JSDoc 更改为@returns {Promise<string>}然后错误就消失了：

  /**
   * Fetch from the swapi API
   *
   * @param {string} type
   * @param {string} id
   * @returns {Promise<string>} JSON
   */

您还可以使用@async提示作为JSDoc文档建议：

/**
 * Download data from the specified URL.
 *
 * @async
 * @function downloadData
 * @param {string} url - The URL to download from.
 * @return {Promise<string>} The data from the URL.
 */