时间戳

首页 > 解决方案 > Redux-saga 不等待 api 调用解决，而是不断返回承诺。如何让“yield call”等待 api 调用？

javascript - Redux-saga 不等待 api 调用解决，而是不断返回承诺。如何让“yield call”等待 api 调用？

问题描述

我在哪里发出 API 请求：

function* search(value){
    // return new Promise(async (resolve, reject)=>{
    //     try {
    //         const res = await axios.get(`https://www.breakingbadapi.com/api/characters?name=${value}`)
    //         console.log(res.data)
    //         resolve(res.data)
    //     } catch (error) {
    //         reject(error)
    //     }
    // })

    return axios.get(`https://www.breakingbadapi.com/api/characters?name=${value}`)

            .then(res=>{
                console.log(res.data)
            })

            .catch(err=>{
                // console.log(err)
            })
}

我在哪里调用此函数以获取结果并将其置于状态：

  function* startSearch(value){
    try {
        yield put({type:'loading'})
        const person = yield call(search, value)
        console.log("SAGA",person)
        yield put({type:'success', payload:person})
    } catch (error) {
        yield put({type:'failure'})
    }
}

如您所见，我尝试将 api 调用包装在一个 promise 和典型的 .then .catch 中。无论我保持控制台记录一个承诺，并且没有一种对象按预期存储在状态中。根据文档，如果生成器返回承诺，则 yield 调用应该暂停生成器，但这似乎没有发生。

编辑：这就是为什么你需要远离屏幕的人。我需要做的就是从搜索功能中删除“*”。超级容易。

标签： javascriptreactjsreduxredux-saga

解决方案

看似简单。您需要做的就是将 Promise 生成函数调用包装在它自己的函数中，然后您可以使用 Redux-Saga 的call().

我认为您只需要使您的search函数成为常规函数而不是生成器函数。（删除*）

function search(url) {
  return axios({ url })
    .then(response => response.data)
    .catch(err => {
      log.error(err);
    });
}
function* startSearch() {
  const response = yield call(search, downloadURL);
}

推荐阅读