Question

我在react reducer中有以下代码：

 export function getUsers(term) {
  return function(dispatch, getState) {
    if(term.length > 0) {
      dispatch(requestPeople())
      fetch('http://api.com/api/users/search?q=' + term)
      .then(e => e.json())
      .then(function(response){
        var arr = response
        arr.map(function(i) {
          fetch('http://api.com/api/user/' + i.id + '/photo')
            .then(function(resp){
              i.avatar=resp.url
            }).catch((error) => {
                alert(error)
          });
        })
        dispatch(receivePeople(arr))
      }).catch((error) => {
          alert(error)
      });
    } 
  }
}

我需要在另一个api fetch调用中来自一个api fetch调用的数据。我知道我上面这样做的方式是错误的，因为这会改变状态并且是反模式的。

将数据从一次提取调用传递到另一种提取的最佳方法是什么？

Answer 1

如果您可以使用新的async/await功能，则可以执行以下操作：

export function getUsers(term) {
    return async function(dispatch, getState) {
        if (term.length > 0) {
            dispatch(requestPeople())
            try {
                const e = await fetch('http://api.com/api/users/search?q=' + term)
                const res = await e.json()
                const arr = res.map(function(i) {
                    try {
                        const photoRes = await fetch('http://api.com/api/user/' + i.id + '/photo');
                        i.avatar = photoRes.url
                    } catch(error) {
                        alert(error)
                    }
                    return i
                }
                dispatch(receivePeople(arr))
            } catch(error) {
                alert(error)
            }
        } 
    }
}

redux动作创建器中的多个获取请求

1 个答案: