栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在Flux应用程序中应在何处提出Ajax请求?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在Flux应用程序中应在何处提出Ajax请求?

我强烈支持将异步写入操作放在动作创建者中,而将异步读取操作放在商店中。目标是将商店状态修改代码保留在完全同步的动作处理程序中;这使他们易于推理,并且易于进行单元测试。为了防止对同一端点的多个同时请求(例如,重复读取),我将把实际的请求处理移到一个单独的模块中,该模块使用promise来防止多个请求。例如:

class MyResourceDAO {  get(id) {    if (!this.promises[id]) {      this.promises[id] = new Promise((resolve, reject) => {        // ajax handling here...      });    }     return this.promises[id];  }}

尽管存储中的读取涉及异步函数,但有一个重要的警告,即存储不会在异步处理程序中更新自身,而是触发操作, 在响应到达 时才
触发操作。此操作的处理程序最终进行了实际状态修改。

例如,一个组件可能会:

getInitialState() {  return { data: myStore.getSomeData(this.props.id) };}

该商店可能实现了一种类似于以下内容的方法:

class Store {  getSomeData(id) {    if (!this.cache[id]) {      MyResurceDAO.get(id).then(this.updateFromServer);      this.cache[id] = LOADING_TOKEN;      // LOADING_TOKEN is a unique value of some kind      // that the component can use to know that the      // value is not yet available.    }    return this.cache[id];  }  updateFromServer(response) {    fluxDispatcher.dispatch({      type: "DATA_FROM_SERVER",      payload: {id: response.id, data: response}    });  }  // this handles the "DATA_FROM_SERVER" action  handleDataFromServer(action) {    this.cache[action.payload.id] = action.payload.data;    this.emit("change"); // or whatever you do to re-render your app  }}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/495361.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号