从零开始 React Native (3) grenerator函数 控制流管理 Promise

分类：React作者：佚名

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="generator_test.js"></script>
    <Meta charset="UTF-8">
    <style type="text/css"> progress { width: 160px; border: 1px solid #0064B4; background-color: #e6e6e6; color: #0064B4; } </style>
    <title>code3_Generator函数</title>

</head>
<body>

<progress max="100" value="5"></progress>
<div id="data">sdf</div>
<!--<input type="button" name="button" onclick="ajax()" value="ajax请求"/>-->
<input type="button" name="button" onclick="myAjax()" value="newAjax请求"/>
</body>
</html>

JS

/** * Created by liuml on 2017/4/20. */

/** * 下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。 * 也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield语句（或return语句）为止。 */
//grenerator函数
//区别
//1.返回值function*
//2.yield
function* func() {
    yield "step1";
    console.log("step1");

    yield "step2";
    console.log("step2");

    // return "result";
}

let state = func();
state.next();
state.next();
state.next();
console.log(state.next());

// 案例 :
//功能 显示进度条 -> 请求数据 ->获取数据成功 隐藏进度条
//显示进度条
function showLoadingProgress() {
    //
    let progress = document.getElementsByTagName("progress")[0];
    //定时器
    let interval = setInterval(function () {
        progress.value += 10;
        if (progress.style.display === "none") {
            clearInterval(interval); //取消定时器
        }
        /*if (progress.value == 100) {//用这种方式的话就不用隐藏了 这里进度条满了后自动给隐藏 progress.style.display = "none"; clearInterval(interval); }*/
    },300);
}

//请求数据
function loadUIDataAsynch(callback) {

    //模拟网络延时
    setTimeout(function () {
        //拿到数据

        let datanode = document.getElementById("data");
        console.log(datanode);
        console.log(datanode.innerHTML);
        datanode.innerHTML = "模拟从服务器获得的数据.";
        //隐藏进度条;
        callback();

    },3000);

}

//隐藏进度条
function hideLoadingProgress() {
    var progress = document.getElementsByTagName("progress")[0];
    progress.style.display = "none";
}

//
function loadUiMain() {
    showLoadingProgress();
    loadUIDataAsynch(hideLoadingProgress);

}

//当页面加载完成之后 开始操作
window.onload = loadUiMain;


//使用 Generator 函数

//显示进度条
function showLoadingProgress() {
    //不断刷新进度条
    //DOM
    var progress = document.getElementsByTagName("progress")[0];
    //定时器，每隔400毫秒，进度累加
    var interval = setInterval(function () {
        progress.value += 10;
        if (progress.style.display === "none") {
            clearInterval(interval); //取消定时器
        }
    },400);
}

//获取数据
function loadUIDataAsynch() {

    //模拟网络延时
    setTimeout(function () {
        //拿到数据
        let datanode = document.getElementById("data");
        console.log(datanode);
        console.log(datanode.innerHTML);
        datanode.innerHTML = "模拟从服务器获得的数据.";
        //隐藏进度条
        loader.next();
    },3000);

}

//请求数据

function hideLoadingProgress() {
    var progress = document.getElementsByTagName("progress")[0];
    progress.style.display = "none";
}

//异步操作的同步化表达
function* loadUi() {
    //显示对话框
    showLoadingProgress();
    //加载数据
    yield loadUIDataAsynch();
    //隐藏对话框
    hideLoadingProgress();

}

var loader;

window.onload = function () {
    loader = loadUi();
    loader.next();
}


//next传参
//yield句本身没有返回值，或者说总是返回undefined
//next方法可以带一个参数，该参数就会被当作上一个yield语句的返回值

/** * Generator 函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过next方法的参数， * 就有办法在 Generator 函数开始运行之后，继续向函数体内部注入值。 * 也就是说，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。 */
function* func2() {
    console.log("started");
    let r1 = yield;
    console.log(r1); //输出yield返回值
    let r2 = yield;
    console.log(r2);
}

let state = func2();
state.next();
state.next("a");
state.next();

//循环输出，通过传参，随时让循环重新开始
function* func3() {
    for (let i = 0; i < 5; i++) {
        let reset = yield i;
        console.log(reset);
        if (reset) i = -1;
        //console.log(i);
    }
}

let state = func3();
console.log(state.next());
console.log(state.next());
//通过next传参，让yield有返回值
console.log(state.next(true));
console.log(state.next());
console.log(state.next());


//按照流程执行
//step1(value1) -> step2(value2) -> step3(value3) -> step4(value4)

function step4(value3,callback) {
    var value4 = `step4_${value3}`;
    callback(value4);
}

function step3(value2,callback) {
    var value3 = `step3_${value2}`;
    callback(value3);
}

function step2(value1,callback) {
    var value2 = `step2_${value1}`;
    callback(value2);
}

function step1(callback) {
    var value1 = `step1_start `;
    callback(value1);
}


//回调嵌套
step1(function (value1) {
    step2(value1,function (value2) {
        step3(value2,function (value3) {
            step4(value3,function (value4) {
                console.log(value4);
            });
        });
    });
});


function step4(value3) {
    return `step4_${value3}`;
}

function step3(value2) {
    return `step3_${value2}`;
}

function step2(value1) {
    return `step2_${value1}`;
}

function step1() {
    return `step1_start `;
}

//控制流管理
function* stepFunc() {
    let value1;
    yield value1 = step1();
    let value2;
    yield value2 = step2(value1);
    let value3;
    yield value3 = step3(value2);
    let value4;
    yield value4 = step4(value3);
    console.log(value4);
}
//顺序执行
for (var i of stepFunc());


//Ajax请求网络，json数据
//请求成功：显示数据
//请求失败：抛出异常
//局部刷新8
function ajax() {
    console.log("点击了ajax按钮");
    url = "test.json";
    var request = new XMLHttpRequest();
    request.open("GET",url);
    request.onreadystatechange = handler;
    request.responseType = "json";//响应类型 json
    request.setRequestHeader("Accept","application/json");
    request.send();
    //回调
    function handler() {
        if (request.readyState !== 4) {

            return;
        }
        if (this.state == 200) {//请求成功 显示数据
            console.log(this.response.message);
        } else {
            throw new Error(this.statusText);
        }
    }

}

//
//Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大
//Ajax请求网络，json数据
//请求成功：显示数据
//请求失败：抛出异常
//局部刷新
//Promise对象的三种状态
//Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）
function ajax(url) {

    var promise = new Promise(function (resolve,reject) {
        var request = new XMLHttpRequest();
        request.open("GET",url);
        request.onreadystatechange = handler;
        request.responseType = "json";
        request.setRequestHeader("Accept","application/json");
        request.send();

        function handler() {
            //4完成响应 解析完成
            if (this.readyState !== 4) {
                return;
            }

            if (this.state == 200) {
                resolve(this.response);
            } else {
                reject(new Error(this.statusText));
            }
        }

    });
    return promise;

}

function myAjax() {
    console.log(ajax('test.json'));
    ajax('test.json').then(
        //resolve 成功
        function (json) {
            console.log(json);
            alert(json);
        },function (e) {
            //rejedt 失败
            console.log(e.message + "失败");
            alert(e.message);
        }
        // json => json.message.log
        //reject 失败
    )


}
function ajax(url) {
    var promise = new Promise(function (resolve,url)
        request.onreadystatechange = handler;
        request.responseType = "json"; //服务器响应数据的类型 json
        request.setRequestHeader("Accept","application/json");
        request.send();

        //回调
        function handler() {
            //4（完成）响应内容解析完成
            if (this.readyState !== 4) {
                return;
            }
            if (this.status == 200) {
                //请求成功：显示数据
                resolve(this.response);
            }
            else {
                reject(new Error(this.statusText));
            }
        }
    });

    return promise;
}

//指定resolve状态、reject状态的回调函数
ajax('test.json').then(
    //resolve
    json => alert(json.message),//reject，可选的
    e => console.log(e.message)
);

还有个json 文件数据 我随便搞的
名字是test.json

{
  "repBody": { "appSignins": [ { "id": 41111,"user_id": 21733,"user_loginname": "测试内容ph34","count": 1,"create_time": 1482217201000,"last_logintime": 1482197775000,"remark": "第1天","score": 5,"user_apptype": "0" },{ "id": 41111,"count": 2,"create_time": 1482317353818,"remark": "连续签到第2天","score": 10,"count": 3,"create_time": 1482403753819,"last_logintime": 1482230953818,"remark": "签到第3天","count": 4,"create_time": 1482490153819,"last_logintime": 1482230953819,"remark": "签到第4天","count": 5,"create_time": 1482576553819,"remark": "签到第5天","count": 6,"create_time": 1482662953820,"remark": "签到第6天","count": 7,"create_time": 1482749353820,"last_logintime": 1482230953820,"remark": "连续签到第7天","score": 20,"count": 8,"create_time": 1482835753821,"remark": "签到第8天","count": 9,"create_time": 1482922153821,"last_logintime": 1482230953821,"remark": "签到第9天","count": 10,"create_time": 1483008553821,"remark": "签到第10天","count": 11,"create_time": 1483094953822,"remark": "签到第11天","count": 12,"create_time": 1483181353822,"last_logintime": 1482230953822,"remark": "签到第12天","count": 13,"create_time": 1483267753823,"remark": "签到第13天","count": 14,"create_time": 1483354153823,"last_logintime": 1482230953823,"remark": "连续签到第14天","score": 50,"count": 15,"create_time": 1483440553824,"remark": "签到第15天","count": 16,"create_time": 1483526953824,"last_logintime": 1482230953824,"remark": "签到第16天","count": 17,"create_time": 1483613353825,"remark": "签到第17天","count": 18,"create_time": 1483699753825,"remark": "签到第18天","count": 19,"create_time": 1483786153825,"last_logintime": 1482230953825,"remark": "签到第19天","count": 20,"create_time": 1483872553827,"remark": "签到第20天","count": 21,"create_time": 1483958953827,"last_logintime": 1482230953827,"remark": "签到第21天","count": 22,"create_time": 1484045353828,"remark": "签到第22天","count": 23,"create_time": 1484131753828,"last_logintime": 1482230953828,"remark": "签到第23天","count": 24,"create_time": 1484218153829,"remark": "签到第24天","count": 25,"create_time": 1484304553829,"last_logintime": 1482230953829,"remark": "签到第25天","count": 26,"create_time": 1484390953829,"remark": "签到第26天","count": 27,"create_time": 1484477353830,"remark": "签到第27天","count": 28,"create_time": 1484563753830,"last_logintime": 1482230953830,"remark": "签到第28天","count": 29,"create_time": 1484650153831,"remark": "签到第29天","count": 30,"create_time": 1484736553831,"last_logintime": 1482230953831,"remark": "连续签到第30天","score": 100,"user_apptype": "0" } ],"isSigned": false,"resCode": "1","resMsg": "获取数据成功！" } }

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...
react 学习(六) 函数组件实例及类组件生命周期
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...
mini react-window(二) 实现可知变化高度虚拟列表
上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如...
react 学习(五) 完善 setState 及实现 ref
上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二...
react 学习13实现 PureComponent
我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解...
react学习(十) React 中的 context
在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。
react 学习(一) 实现简版虚拟 dom 和挂载
楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试...
react 学习(三) 组件更新
我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
react学习(八) diff 算法实现
前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有...
react学习(九) React 新的生命周期
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安...
react 学习14实现 React.memo
上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用...
细聊Concent & Recoil , 探索react数据流的新开发模式
开源不易，感谢你的支持，❤ star me if you like concent ^_^
使用hel-micro制作远程antd、tdesign-react
hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案 ，欢迎关注与了解
setup vs 5 react hooks,助你避开"沟"中陷阱
本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由...
setState 同步 与异步
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot