【问题标题】:Redux-saga isn't waiting for api calls to resolve, keeps returning promises. How do I make "yeild call" wait for on api calls?Redux-saga 不等待 api 调用解决,而是不断返回承诺。如何让“yield call”等待 api 调用?
【发布时间】:2020-07-20 19:50:02
【问题描述】:

我在哪里发出 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 调用应该暂停生成器,但这似乎没有发生。

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

【问题讨论】:

    标签: javascript reactjs redux redux-saga


    【解决方案1】:

    看似简单。您需要做的就是将 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);
    }
    

    【讨论】:

    • 更像是令人尴尬的简单!我不敢相信我忽略了这一点。
    • 回想起来一切似乎都很简单!
    • @Officer_Narc 如果你能在找到时间的时候将答案标记为已接受,那真的会让我的一天更加美好!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-09-23
    • 2016-04-13
    • 2019-04-29
    • 1970-01-01
    • 2017-01-28
    • 2021-12-26
    • 1970-01-01
    相关资源
    最近更新 更多