Question

我正在使用redux-saga来获取服务器api数据。我的问题是我正在尝试设计以下代码。

被注释掉的yield put(get01Action(members));具有以下语法错误。

A 'yield' expression is only allowed in a generator body.

我不知道如何管理。

import '@babel/polyfill';
import { fork, take, put } from 'redux-saga/effects';
import axios from "axios";

export function* rootSaga(){
    yield fork(fetch01);
    yield fork(fetch02);
}

function* fetch01() {
    while (true){
        yield take('FETCH01_REQUEST');
        axios.get('/api/members')
            .then(function (response) {
                // handle success
                let members = response.data.data;
                // yield put(get01Action(members));
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .finally(function () {
                // always executed
            });
    }
}
function* fetch02() {
    ....
}

function get01Action(members){
    return {
        type: 'GET_MEMBERS',
        member_id: 0,
        members: members
    }
}

请给我一些建议。

谢谢。

Answer 1

您可以使用通话效果进行axios通话，然后可以使用put。

现在它不起作用，因为您在promise call内使用yield。

function* fetch01() {
  while (true){
    try {
      yield take('FETCH01_REQUEST');
      const response = yeild call(axios.get, '/api/members');
      yield put(get01Action(response.data.data))
    } catch(err) {
      console.error(err)
    }

}

}

Answer 2

因为您的生成器fetch01已同步，但您正在等待Promise的重新发布。

yield不能包装在生成器以外的其他函数中。

您可以使生成器async像这样：

export async function* rootSaga(){
    yield await fork(fetch01);
    yield fork(fetch02);
}

async function* fetch01() {
    while (true) {
        yield take('FETCH01_REQUEST');
        try {
            const response = await axios.get('/api/members');
            // handle success
            let members = response.data.data;
            yield put(get01Action(members));
        } catch (error) {
            // handle error
            console.log(error);
        } finally {
            // always executed
        }
    }
}

仅在生成器主体中允许“ yield”表达式

2 个答案: