Redux Saga中Fetch返回空对象问题：新手求助

先看看你贴的代码：

import axios from "axios"; 
import {call, put, takeLatest} from "redux-saga/effects"; 
import { USERS_FETCH_REQUESTED, USERS_FETCH_SUCCEEDED, USERS_FETCH_FAILED } from 'actions/constants'

function *fetchUsers(action) { 
  try { 
    const response = yield call(fetch, 'https://jsonplaceholder.typicode.com/users'); 
    const data = response.json(); 
    console.log(data) 
    yield put({type: USERS_FETCH_SUCCEEDED, payload: data}); 
  } catch (e) { 
    yield put({type: USERS_FETCH_FAILED, payload: e.message}); 
  } 
}

function* mySaga() { 
  yield takeLatest(USERS_FETCH_REQUESTED, fetchUsers); 
} 

export default mySaga 

这个问题我之前也踩过坑！核心原因是你忽略了response.json()是异步操作——它返回的是一个Promise，而你没有用yield来等待它完成解析。

你看到控制台打印出10条数据，是因为浏览器的控制台会特殊处理Promise对象：当Promise最终resolve后，控制台会自动展开它的结果给你看，但实际上在你执行yield put的时候，data还只是一个未解析的Promise对象，并不是真正的用户数组，所以Redux store里收到的payload自然是空对象（或者说Promise对象被序列化后的结果）。

修正方法很简单，给response.json()加上yield即可：

修正后的代码 #

import axios from "axios"; 
import {call, put, takeLatest} from "redux-saga/effects"; 
import { USERS_FETCH_REQUESTED, USERS_FETCH_SUCCEEDED, USERS_FETCH_FAILED } from 'actions/constants'

function *fetchUsers(action) { 
  try { 
    const response = yield call(fetch, 'https://jsonplaceholder.typicode.com/users'); 
    // 加上yield，等待Promise解析完成
    const data = yield response.json(); 
    console.log(data) 
    yield put({type: USERS_FETCH_SUCCEEDED, payload: data}); 
  } catch (e) { 
    yield put({type: USERS_FETCH_FAILED, payload: e.message}); 
  } 
}

function* mySaga() { 
  yield takeLatest(USERS_FETCH_REQUESTED, fetchUsers); 
} 

export default mySaga 

这样Saga会等待response.json()的Promise resolve，拿到真正的用户数据后再发送成功动作，payload就会是你期望的10条用户数据了。另外提一句，你导入了axios但没用到，这个可以根据需求删掉或者替换掉fetch来使用axios，也是完全没问题的~

内容的提问来源于stack exchange，提问作者Istvan Orban