蚂蚁设计专业版的登录问题。不明白的代码

问题描述 投票:0回答:1

我工作蚂蚁设计亲。但我不明白的登录密码的模型。在这里,他们使用

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

如果你想看到完整的代码转到此链接Ant Design Pro login model js file

在这里,你会发现完整的代码。现在我不明白的代码是什么意思。

谢谢

javascript ant-design-pro es6-generator
1个回答
1
投票

带星的函数名意味着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的参数。同样,你通过第二个对象都需要一个电话,一个放属性,它是功能。

首先,它执行呼叫,传入fakeAccountLogin和有效载荷,并产生的功能,即,功能和暂停通话发送到外范围的结果。当使用发电机,无论是传递给它的迭代器的.next() function恢复登录功能将被分配到响应。在此之后,put被调用,通过changeLoginStatus作为typeresponsepayload和结果,如果产生这种function的调用者。

当这种发电机的迭代器的.next()叫,response.status是对“OK”检查,如果有匹配,则reloadAuthorized叫,urlParams初始化以及params。在此之后redirectparams.redirect被初始化,莫非这就是truey,redirectUrlParams初始化和一些进一步的URL操作会发生。不管怎么说,如果有一个重定向,那么函数结束。

如果response.status'ok',但没有重定向,然后put被调用,其结果是产生出来的时候,下一个function的号召的.next()年底,function将结束。如果response.status没有'ok',那么function结束得更早,即当外,如果评价是假的。

你需要看一看到减少在Javascript对象和数组以及迭代器和发电机的功能。你将有一个艰难的时间,直到你为这个分配时间,所以越早做越好。我建议第2章和这本书的第5章:https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20%26%20beyond

© www.soinside.com 2019 - 2024. All rights reserved.