javascript - 试图访问 facebook graph api 回调中的生成器函数功能

Question

此代码位于 redux saga 文件中。

我正在尝试将响应发送回 saga 函数，但我做不到。

new GraphRequestManager().addRequest(infoRequest).start();
infoRequest = new GraphRequest(
    '/me', {
        httpMethod: 'GET',
        version: 'v2.5',
        parameters: {
            'fields': {
                'string': 'email,first_name,last_name,id'
            }
        }
    }, startFacebookRegister);

facebookRegister 函数

function * startFacebookRegister(err, res) {
    const { id, email, first_name, last_name } = res;
    yield put(initFacebookLogin.success(res));
}

Answer 1

如果我们看GraphRequestManager.start .

    const that = this;
    const callback = (error, result, response) => {
      if (response) {
        that.requestCallbacks.forEach((innerCallback, index, array) => {
          if (innerCallback) {
            // here it is called as a normal callback, not a generator
            innerCallback(response[index][0], response[index][1]);
          }
        });
      }
      if (that.batchCallback) {
        that.batchCallback(error, result);
      }
    };

    NativeGraphRequestManager.start(this.requestBatch, timeout || 0, callback);   } ```

您传递的回调作为普通 Function 调用，而不是 GeneratorFunction。

由于它们的执行方式不同，这就是为什么什么都没有发生，因为您的 GeneratorFunction ，在被调用时，只是被实例化并一直存在，直到被垃圾收集。

所以解决这个问题的首选方案是使用 eventChannel，这与 redux-saga 流程一致，它将流程保持在 redux-saga 中，实际上是 advised for similar cases .

另一种不太可取的方法是直接调用原始 store.dispatch，它显然突破了 redux-saga 的抽象层次和流程，但是仍然可以完成工作，方法是调用其他一些 saga 操作，这些操作可以处理 call 带有 response 的 startFacebookRegister .

事件 channel

我们需要将整个 GraphRequestManager... block 包装到一个 eventChannel 中，这样我们就可以重定向 response 或 error 从 vendor 控制回到 saga 流。

可以是这样的:

import {
  cancelled,
  call,
  take,
  put
} from "redux-saga/effects";

import {
  eventChannel,
  END
} from 'redux-saga';

function* startFacebookRegister(err, res) {
  const {
    id,
    email,
    first_name,
    last_name
  } = res;
  yield put(initFacebookLogin.success(res));
}

function* graphRequestWrapper() {
  return eventChannel(emit => {
    const infoRequest = new GraphRequest(
      '/me', {
        httpMethod: 'GET',
        version: 'v2.5',
        parameters: {
          'fields': {
            'string': 'email,first_name,last_name,id'
          }
        }
      }, (err, res) => {
        if (err) {
          emit(new Error(err));
        } else {
          emit(res);
        }

        emit(END);
      });

    // BTW infoRequest variable should be instantiated before we
    // can add it with addRequest, just a side note
    new GraphRequestManager().addRequest(infoRequest).start();

    return () => {
      // clean up
    };
  })
}


export function* mainSaga() {
  const chan = yield call(graphRequestWrapper);

  while (true) {
    try {
      const res = yield take(chan);
      yield call(startFacebookRegister, null, res);
    } catch (err) {
      yield call(startFacebookRegister, err);
    } finally() {
      if (yield cancelled()) chan.close()
    }
  }

}

门店发货

使用商店，您可以从 main.js 或 index.js 中导出您的 store code> 将它与所有的 reducer 和中间件一起使用，并直接在此处使用。

import store "../exported/from/somewhere";

function* startFacebookRegister({payload}) {
  const {
    id,
    email,
    first_name,
    last_name
  } = payload;
  yield put(initFacebookLogin.success(res));
}

function graphRequestWrapper() {
  const infoRequest = new GraphRequest(
    '/me', {
      httpMethod: 'GET',
      version: 'v2.5',
      parameters: {
        'fields': {
          'string': 'email,first_name,last_name,id'
        }
      }
    }, (err, response) => {
      store.dispatch({type: "INIT_FACEBOOK_LOGIN_REQUEST_SUCCESS_SAGA", payload: {...response}})
    });

  new GraphRequestManager().addRequest(infoRequest).start();
}

function* mainSaga() {
  yield takeLatest("INIT_FACEBOOK_LOGIN_REQUEST_SUCCESS_SAGA", startFacebookRegister);

  yield call(graphRequestWrapper);
}