时间戳

首页 > 解决方案 > Ant Design Pro 登录问题。看不懂代码

javascript - Ant Design Pro 登录问题。看不懂代码

问题描述

我在 Ant Design pro 工作。但我无法理解登录代码的模型。他们在这里使用

effects: {
           *login({ payload }, { call, put }) {}
         }

如果您想查看完整代码，请转到此链接 Ant Design Pro 登录模型 js 文件

在这里你会找到完整的代码。现在我不明白那个代码是什么意思。

谢谢

标签： javascriptant-design-proes6-generator

解决方案

带星号的函数名表示生成器。生成器是function可以使用yield关键字暂停其运行进程的生成器。yield是生成器和调用者之间的双向通信。有了这些知识，让我们看看函数本身：

    *login({ payload }, { call, put }) {
      const response = yield call(fakeAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
      // Login successfully
      if (response.status === 'ok') {
        reloadAuthorized();
        const urlParams = new URL(window.location.href);
        const params = getPageQuery();
        let { redirect } = params;
        if (redirect) {
          const redirectUrlParams = new URL(redirect);
          if (redirectUrlParams.origin === urlParams.origin) {
            redirect = redirect.substr(urlParams.origin.length);
            if (redirect.match(/^\/.*#/)) {
              redirect = redirect.substr(redirect.indexOf('#') + 1);
            }
          } else {
            window.location.href = redirect;
            return;
          }
        }
        yield put(routerRedux.replace(redirect || '/'));
      }
},

function期望两个对象作为输入并将它们简化为参数。您需要将第一个参数作为对象传递，{payload: 'something'}并且payload该对象的属性将映射到function. 同样，您传递的第二个对象将需要一个 call 和一个 put 属性，它们是函数。

首先它执行call，传递fakeAccountLogin和payload并生成函数，即函数暂停并将调用结果发送到外部作用域。当使用.next() function生成器的迭代器恢复登录功能时，传递给它的任何内容都将分配给响应。在这之后，put被调用，传递changeLoginStatusastype和responseaspayload和结果，如果让给 this 的调用者function。

当.next()这个生成器的迭代器被调用时，response.status 会被检查为 'ok'，如果有匹配， thenreloadAuthorized被调用，和 .urlParams一样被初始化params。在这redirect将被初始化params.redirect并且这是真的之后，redirectUrlParams被初始化并且将发生一些进一步的 URL 操作。无论如何，如果有重定向，那么函数就会结束。

如果response.status是'ok'，但没有重定向，则调用 then 并在发出下一个调用时从末尾put产生结果，则将结束。如果不是，则结束得更早，即当外部 if 被评估为假时。function.next()functionresponse.status'ok'function

您将需要研究减少 Javascript 中的对象和数组以及迭代器和生成器函数。在你为此分配时间之前，你会遇到困难，所以越早做越好。我推荐本书的第2章和第5章：https ://github.com/getify/You-Dont-Know-JS/tree/master/es6%20%26%20beyond

推荐阅读