'await' 对这个表达式的类型没有影响

IT技术 javascript reactjs async-await
2021-05-13 12:43:20

我搜索了这个，但我没有找到任何特定于我需要的东西。如果有的话，请在这里分享。

我正在尝试创建要在各种组件中调用的通用服务。由于它是一个从外部源请求数据的函数，因此我需要将其视为异步函数。问题是，编辑器返回消息“'await' 对该表达式的类型没有影响”。应用程序确实崩溃了，因为还没有数据。

People.js 调用服务 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>
   )
  }

这是 requests.js，它从 API 返回 json

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;
})}

在此处输入图片说明

4个回答

我收到此错误只是因为我的 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.
 */

await仅当您将其与Promise一起使用时才有用，但requests不返回Promise。它根本没有 return 语句，所以它隐式地返回undefined.

看起来你想让它返回一个Promise，所以这是你的代码，其中添加了返回：

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;
    })
}

ps，如果您更喜欢使用async/执行此操作await，它看起来像：

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 之后放了一个错误的对象。您可以通过在 await 关键字之后放置一个Promise（不带括号）或一个返回Promise的函数来完全摆脱这种情况。

如果你用typescript得到这个，也许是因为你没有返回 Promise

例如：
❌不正确：

async delPerson (id: string): Partial<Person> {
    return await this.personModel.findByIdAndRemove(id);
}
deletedPerson = await this.personService.delPerson(body._id);
// in above line typescript thinks that he is awaiting for something which is not a promise

✅更正：

async delPerson (id: string): Promise<Partial<Person>> {
    return await this.personModel.findByIdAndRemove(id);
}
deletedPerson = await this.personService.delPerson(body._id);
其它你可能感兴趣的问题
上一篇如何在 React 中通过 Key 查找元素？ 下一篇玩笑react示例