Question

当我嘲笑我的项目时，我碰到过这堵墙。

我在其中发出了10个请求的axios.all请求。我该怎么嘲笑它？

我目前正在使用moxios模拟我的axios http请求，但它似乎没有处理此问题的功能。

示例：

axios.all([
    axios.get(url1),
    axios.get(url2),
    axios.get(url3)
    ])
    .then(axios.spread(function (r1, r2, r3) { 
    ...
    }))
.catch(err => {
    console.error(err, err.stack);
});

有没有人遇到过这个问题，他们找到了解决方案？

更新

我只是虚拟地嘲笑每个请求，但这是一个缓慢而痛苦的过程，是否有更快捷的方法来做到这一点？

Answer 1

我解决这个问题的方法是使用async和await来确保该函数一直等到它完成运行后再声明。

我没有使用moxios，而是使用axios-mock-adapter，但我觉得可以用相同的方式解决问题。

鉴于上述问题，我这样解决了...

在我的组件中，我有一个像这样的方法

getTheThing () {
  axios
  .all([
    axios.get(`/api/endpoint/1`),
    axios.get(`/api/endpoint/2`)
  ])
  .then(
    axios.spread((response1, response2) => {
      this.setState({
        firstThing: response1.data,
        secondThing: response2.data
      })
    })
  )
}

在我的测试中……

mock = new MockAdapter(axios)
mock
  .onGet(url1)
  .reply(200, mockData1)
  .onGet(url2)
  .reply(200, mockData2)



it('should set issue state after fetching the requested issue', async () => {
    await component.instance().getTheThing()
    expect(whateverItIsYoureExpecting)
})

Answer 2

这就是我最终对其进行嘲笑的方式。axios.all在这种情况下有2个调用。 mockAxios将循环两次。我使用了axios-mock-adapter包。

Axios调用（这也适用于Promise.all）

      axios.all[
         await axios.get('endpoint1'),
         await axios.get('endpoint1'),
       ]

模拟

       const mockData1 = [1, 2, 3];
       const mockData2 = [3, 2, 1];

       MockAxios.onAny().reply(config => {
            // Use your config to return different responses.
            // This mock will loop through every request in the Promise.all
            if(config.url === 'endpoint1') {
                return [200, {data: mockData1}, config];
            } else if(config.url === 'endpoint2') {
                return [200, {data: mockData2}, config];
            }
        });

如何模拟axios.all请求？

2 个答案: