Question

我正在构建一个简单的react / redux应用程序，它使用jsonp向giantbomb api发出请求。我正在使用redux-saga来处理api调用以及jsonp-promise。我在saga中进行调用，它返回一个promise，但是在我将动作和响应数据发送到reducer之前，该promise只会超时。还有全局回调函数，它似乎接收响应数据，但我不知道它将在传奇流程中的位置，或者我甚至需要使用它。

import { takeEvery, call, put } from 'redux-saga/effects';
import jsonp from 'jsonp-promise';

let setVideoCallback = "cb" + Math.floor(Math.random() * 1000);
window[setVideoCallback] = function(response) {
  console.log(response);
} 


// workers
export function* setVideoAsync() {
  try {
    console.log('attempting to set video via api call');
    let jsonpArgs = [
      "https://www.giantbomb.com/api/videos/" +
      "?api_key=816627d452ffb34d20762fd2f3b575dfe906bfd9" +
      "&format=jsonp&json_callback=" +
      setVideoCallback +
      "&limit=1&field_list=hd_url,name,deck,publish_date," +
      "user&filter=video_type:3,video_type8" +
      "&sort=publish_date:desc",
      {param: 'json_callback'}
    ];

    let response = yield call(jsonp, jsonpArgs);
    const promise = response.promise;
    console.log('promise in worker saga:');
    console.log(promise);
    response = yield promise;
    yield put({type: 'VIDEO_SET_SUCCEEDED', response: response.data 
});
  } catch(e) {
    console.log('setVideoAsync request failed!');
    console.log(e);

    yield put({type: 'VIDEO_SET_FAILED', message: e.message });
  }
}

// watchers
export function* watchSetVideo() {
  console.log('redux-saga is running the VIDEO_SET action listener');
  yield takeEvery('VIDEO_SET', setVideoAsync);
}

我如何得到解决的承诺？或以其他方式正确拨打api电话？

Answer 1

想出来。看起来call中的函数需要返回redux-saga的承诺来暂停生成器并解决它。所以我只是将jsonp包装在另一个返回其promise属性的函数中，并将该函数用作调用的第一个参数。

如何使用react / redux和jsonp使用redux-saga进行api调用？

1 个答案: