react-10（generator函数，redux-saga中间件）

最新推荐文章于 2024-04-06 22:36:43 发布

我只是想饮一杯奶茶

最新推荐文章于 2024-04-06 22:36:43 发布

阅读量588

点赞数

分类专栏： react 文章标签： react.js javascript 前端中间件前端框架

本文链接：https://blog.csdn.net/weixin_45626517/article/details/120967630

版权

本文介绍了如何在React应用中结合generator函数和redux-saga中间件来处理异步操作。首先解释了generator函数的概念，强调其分段执行和yield关键字的作用，然后详细讲解了redux-saga的安装、配置以及如何在项目中应用，包括创建saga文件和在store中引入。通过一个简单的例子展示了如何在实际项目中使用saga进行异步处理。

摘要由CSDN通过智能技术生成

redux的另一个中间件。

前置知识点：ES6 generator函数

generator函数

生成器的意思。是普通函数，但是带了一个 * 号

经典形态：

function* test(){}
function * test(){}
function *test(){}

分段使用：

generator函数是暂缓执行的，可以分段使用，比如我们调用

function* test(){
    console.log(1)
}

test()  //没有任何打印

为什么会这样呢？我们在调用test（）时，它其实返回的是一个generator对象，迭代器对象

如果你想要方法里的console.log(1)执行，需要加上next()方法才能往下执行，就是需要

test().next()

那分段的作用是什么呢？分段使用的关键字是 yield。

yield相当于一个返回值的意思，相当于return，但是不同于return，是return的一个扩展，如果代码遇到return就不会再往下执行只能返回一个值，但是yield可以返回多个值，可以有多个yield，在代码执行中，遇到一个yield就停一次，再遇再停，yield停的时候就会把yield后面的值返回去。

比如下面的代码执行

function* test(){
    console.log(1)
    yield 11;
    console.log(2)
    yield 22;
    console.log(3)
    yield 33;
    console.log(4)
    return 44
}

test().next()  //先打印1，然后碰到yield 1 就停下来
test().next()  //继续往下执行，打印2，碰到yield 2 停下来
test().next()  //打印3
test().next()  //打印4，碰到return停下来

再关注一下yield的返回值

yield的返回值会是一个generator对象，里面会有两个值，一个是yield后面跟的那个值，还有一个是是否引用结束的一个值：{ value: xxx, done: true/false }

done 表示这个函数是否结束。

function* test(){
    console.log(1)
    yield 11;
    console.log(2)
    yield 22;
    console.log(3)
    yield 33;
    console.log(4)
    return 44
}

console.log(test().next()) //先执行console.log(1)，打印1，接着打印next()的返回值 {value:11,done:false}
console.log(test().next()) //2 {value:22,done:false}  
console.log