Question

我需要并行调用两个api 。这很重要，因为我希望将page to load的时间保持在最少。

如果我在componentDidMount中调用了两个api（如下所示），那么它是否是异步的。

class Test extends Component{
  constructor(args) {
            super(args)
            this.state = {
               ...
            };
            ...
        }

        componentDidMount() {
            //api1() and api2() are like .get(url).then()
            this.props.dispatch(actions.api1())     
            this.props.dispatch(actions.api2())
        }
    }

将同时或同步调用api1（）和api2（）吗？我该如何并行进行

我还想提到我的应用程序使用了类似以下内容的redux-thunk，但我不确定该代码到底在做什么。我已经读过https://redux.js.org/api-reference/applymiddleware，说通过应用中间件，我们可以使dispatch异步工作。


import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { createLogger } from 'redux-logger'
import axios from 'axios'
import { routerMiddleware } from 'react-router-redux'

import InitialState from './InitialState'


const middleware = [ thunk.withExtraArgument(axios), routerMiddleware(history) ]

/* eslint-enable no-undef */

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(
    rootReducer,
    InitialState,
    composeEnhancers(applyMiddleware(...middleware))
)

export default store

Answer 1

对api1（）和api2（）的调用将并行执行或同步地？而我该如何并行？

它们将并行完成。

我读过https://redux.js.org/api-reference/applymiddleware，应用中间件，我们可以使调度工作异步进行。

是的，您是对的。默认情况下，redux无法处理异步操作，因此您应该考虑使用redux-thunk或saga之类的中间件。

Answer 2

Reudx库中的默认调度方法是绝对同步的。您可以将redux与thunk（或类似的enhancers）结合使用，以消除调度的同步特性，调用thunks时，调度的事件将包装在Promise中。

此外，与React / Redux无关：

浏览器在每个域中的HTTP请求（RFC2616）中定义的并发请求数量有限。选中此link，以查看每个浏览器系列/版本的最大同时连接数。

下面您可以看到某些浏览器同时连接到同一域的最大数量。

+---------+-------------+
| Browser | Connections |
+---------+-------------+
| IE 8, 9 |           6 |
| IE 10   |           8 |
| IE 11   |          13 |
| Chrome  |           6 |
| Safari  |           6 |
| Opera   |           6 |
+---------+-------------+

要知道的是：由于对用户体验XMLHttpRequest Doc的负面影响，在主线程上的同步http请求已被弃用。

希望它会有所帮助。

react-redux：在componentDidMount上并行调用多个api

2 个答案: