mobx内置流flow异步请求

最新推荐文章于 2025-06-01 09:03:33 发布

时光之里

最新推荐文章于 2025-06-01 09:03:33 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 文章标签： mobx flow axios yield *

本文链接：https://blog.youkuaiyun.com/m_review/article/details/81462252

react 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种名为Flow的方法来简化异步编程流程。通过使用*函数和yield关键字替代async/await，使得代码更加简洁易读。文章展示了如何利用Flow进行网络请求数据获取的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是flow

它与async / await的工作方式相同。只需使用函数*而不是async和yield而不是await。
flow的优点在于他在预发上非常接近async / await，并且异步部分不需要手动操作包装，从而产生非常干净的代码。
flow只能用作函数而不能用作装饰器。

应用

import axios from "axios";

export function getSearchData(keyword, moduleType, start = 0, count = 6) {
// 底层请求使用 axios： 基于promise 的HTTP 库，可以用在浏览器和node.js中。
  return axios.get(`/${moduleType}/search`, {
    params: {
      q: keyword,
      start,
      count
    }
  });
}

// 导入getSearchData方法
import { getSearchData } from '../../../apis';
fetchSearchData = flow(
  function*(keyword, module, start, count) {
    try {
      const response = yield getSearchData(keyword, module.value, start, count);
      const data = response.data[module.field];
      this.setSearchData(data);
    } catch (error) {
      console.log(error);
    }
  }.bind(this)
);

// 调用fetchSearchData方法
this.fetchSearchData(value, currentModule);