如何使用 Axios 和 Typescript 等待响应？

Posted 2023-02-19

【中文标题】如何使用 Axios 和 Typescript 等待响应？

【英文标题】：How can I wait for a response using Axios and Typescript?

【发布时间】：2019-12-09 09:55:35

【问题描述】：

我需要您的帮助来调整我的方法以等待 axios 响应。基本上，我向 WebService 发送请求，我需要等待响应以捕获返回并调用另一个方法。

我曾尝试在通话中使用 async/await，但我可能用错了。

class PlaylistController 
  // Metodo inicial para criacao da playlist
  public async create(req: Request, res: Response): Promise<Response> 
    let artists = req.body.bands;
    artists = artists.split(',');

    const search = await Object.values(artists)
      .map((artistsName): Promise<AxiosResponse> => this.searchArtists(artistsName));
    console.log(search);

  

  private searchArtists = async (artistName): Promise<AxiosResponse> => axios.get(`$API_URL/search`, 
    params: 
      q: artistName,
      type: 'artist',
    ,
    headers: 
      Authorization: `$TOKEN_TYPE $REFRESH_TOKEN`,
    ,
  ).then((response): AxiosResponse =>  console.log(response.data.artists); return response; )
    .catch((error) =>  console.log(error.response.data); return error; );

此代码首先记录“console.log(search);”的结果使用此输出：

[Promise  pending ,
 Promise  pending ,
 Promise  pending  ]

然后显示 axios 响应。

【问题讨论】：

您的第一个await 只是在等待map 函数的结果，该函数是同步的并立即返回。如果您想等待所有的承诺返回，请使用Promise.all。

How do I await a list of Promises in javascript/TypeScript?的可能重复

【参考方案1】：

你的“create”函数没有返回一个promise，它是一个void返回类型函数。 此外，您需要在“Axios”等异步任务之前添加等待。 Object.values 不是异步任务。

class PlaylistController 
    // Metodo inicial para criacao da playlist
    public create(req: Request, res: Response): void 
      let artists = req.body.bands;
      artists = artists.split(',');

      search = Object.values(artists).map((artistsName): any => this.searchArtists(artistsName));
      console.log(search)
    

    private searchArtists = async (artistName): Promise<AxiosResponse> => 
        return await axios.get(`$API_URL/search`, 
            params: 
              q: artistName,
              type: 'artist',
            ,
            headers: 
              Authorization: `$TOKEN_TYPE $REFRESH_TOKEN`,
            
        )
    

【讨论】：

我试过了，但由于 get() 返回字符串|Promise 并且它与函数的返回类型不匹配而出现错误