Question

我一直试图通过 workerSaga 创建一个yield call()来使用 axios 来获取数据。提取数据后，我再也无法更新状态。

我看到了2018年的this教程，它使用了不同的机制。它使用yield fetch()。

我使用 axios 的方法：

export default function* rootSaga() {
    yield takeLatest('GET_NEWS', workerSaga);
}

function fetchNews(){
    return axios ({
        method: 'get',
        url: 'https://newsapi.org/v1/articles?source=cnn&apiKey=API_KEY'
    });
}

function* workerSaga() {
    try{
        const resp = yield call(fetchNews);
        const article = resp.articles;

        yield put({ type: 'NEWS_RECEIVED', news: article });
    }
    catch (error){
        yield put({ type: 'NEWS_FETCH_ERROR', error });
    }
}

在这里一切似乎都正确，获取了数据（在 redux devtools 中看到），但是状态无法更新，即状态仍然为null。

2018年的另一种方法：

function* fetchNews() {
    const json=yield fetch('https://newsapi.org/v1/articles?source=cnn&apiKey=API_KEY')
        .then(response => response.json(), );

    yield put({ type: "NEWS_RECEIVED", json: json.articles, });
}

function* workerSaga()  {
    yield takeLatest('GET_NEWS', fetchNews)
}

export default function* rootSaga() {
    yield all([workerSaga(), ]);
}

它完美无瑕。

前axios不能工作的原因可能是什么？

Answer 1

您已经在评论中找到了两种正确的解决方案，但是它们没有解释为什么这些解决方案有效。

问题在于fetch和axios的返回值不同（这就是为什么我喜欢打字稿的原因-您会注意到其中的区别）。

fetch返回的响应具有一个称为.json()的方法。您调用res => res.json()以获取响应的内容。

axois返回的响应已经为您解析了JSON（取决于您的配置）。内容存储在响应的属性data中。

您当前正在尝试从响应对象中获取.articles，但是您需要从.data属性中获取它。您可以通过两种方式进行此操作。

您可以修改fetchNews函数，使其仅返回数据，如@cbr

function fetchNews(){
    return axios ({
        method: 'get',
        url: 'https://newsapi.org/v1/articles?source=cnn&apiKey=API_KEY'
    }).then( resp => resp.data );
}

您可以修改您的workerSaga，以按照正确的路径访问文章，如@Aleksey L所建议。

      const resp = yield call(fetchNews);
      const article = resp.data.articles;

Redux的传奇故事：axios无法正常运行，但fetch（）可以

1 个答案: