redux-saga api yield 调用有效，但没有返回数据

Posted 2023-03-08

【中文标题】redux-saga api yield 调用有效，但没有返回数据

【英文标题】：redux-saga api yield call works, but no data returned

【发布时间】：2020-02-22 15:55:27

【问题描述】：

我现在正在尝试使用 redux saga 和 fetch 进行 POST。我使用 creative-tim 的材料包作为默认模板。

你想通过yield调用执行的API其实是和服务端通信（服务端将接收到的值存储在DB中），但是响应是UNDEFINED。

当我在另一个项目中尝试与 redux-saga 相关的代码时，它运行良好，但仅在带有模板的项目中。但我不认为这是模板的问题。当我尝试与另一台服务器通信时发生了同样的问题。 （使用 axios 进行 GET 通信也有错误，但这只在获取时有效。）

我的模块如下图，

import  createAction, handleActions  from 'redux-actions';
import createRequestSaga, 
  createRequestActionTypes
 from '../lib/createRequestSaga';
import * as askAPI from '../lib/api/ask';
import  takeLatest  from 'redux-saga/effects';

const INITIALIZE = 'ask/INITIALIZE';
const CHANGE_FIELD = 'ask/CHANGE_FIELD';
const [
  WRITE_ASK,
  WRITE_ASK_SUCCESS,
  WRITE_ASK_FAILURE
] = createRequestActionTypes('ask/WRITE_ASK');

export const initialize = createAction(INITIALIZE);
export const changeField = createAction(CHANGE_FIELD, ( key, value ) => (
  key,
  value
));
export const writeAsk = createAction(WRITE_ASK, ( name, email, body ) => (
  name,
  email,
  body
));

const writeAskSaga = createRequestSaga(WRITE_ASK, askAPI.writeAsk);

export function* writeSaga() 
  yield takeLatest(WRITE_ASK, writeAskSaga);


const initialState = 
  name: '',
  email: '',
  body: '',
  ask: null,
  askError: null
;

const ask = handleActions(
  
    [INITIALIZE]: state => initialState,
    [CHANGE_FIELD]: (state,  payload:  key, value  ) => (
      ...state,
      [key]: value
    ),
    [WRITE_ASK]: state => (
      ...state,
      ask: null,
      askError: null
    ),
    [WRITE_ASK_SUCCESS]: (state,  payload: ask ) => (
      ...state,
      ask
    ),
    [WRITE_ASK_FAILURE]: (state,  payload: askError ) => (
      ...state,
      askError
    )
  ,
  initialState
);

export default ask;

和 createRequestSaga 如下所示。 createRequestSaga.js

import  call, put, fork, delay  from 'redux-saga/effects';
import  startLoading, finishLoading  from '../modules/loading';

export const createRequestActionTypes = type => 
  const SUCCESS = `$type_SUCCESS`;
  const FAILURE = `$type_FAILURE`;
  return [type, SUCCESS, FAILURE];
;

export default function createRequestSaga(type, request) 
  const SUCCESS = `$type_SUCCESS`;
  const FAILURE = `$type_FAILURE`;

  return function*(action) 
    yield put(startLoading(type)); //LOADING START

    try 
      const response = yield call(request, action.payload);
      console.log(response); //THIS IS UNDEFINED
      yield put(
        type: SUCCESS,
        payload: response.data
      );
     catch (e) 
      console.log(e); 
      yield put(
        type: FAILURE,
        payload: e,
        error: true
      );
    
    yield put(finishLoading(type)); //LOADING FINISH
  ;

这是api代码

export const writeAsk = ( name, email, body ) => 
  fetch('http://allnewfit.net:4000/api/ask', 
    method: 'POST',
    body: JSON.stringify( name, email, body ),
    headers: 
      'Content-Type': 'application/json'
    
  );
;

我希望响应的输出如下，（只是服务器的响应）

    "fieldCount": 0,
    "affectedRows": 1,
    "insertId": 38,
    "info": "",
    "serverStatus": 2,
    "warningStatus": 0

但实际输出未定义

代码的问题在哪里？感谢您的帮助。

【参考方案1】：

您需要使用 return 或删除 fetch 周围的花括号来返回 fetch 生成的承诺：

export const writeAsk = ( name, email, body ) =>
  fetch('http://allnewfit.net:4000/api/ask', 
    method: 'POST',
    body: JSON.stringify( name, email, body ),
    headers: 
      'Content-Type': 'application/json'
    
  );