js入门(ES6)[六]---异步编程
代码哈士奇 115 2

js是单线程执行 同一时间只能做一件事(任务) 但是有子线程 任务分两种 一种是同步任务 一种是异步任务 同步任务在主线程中排队执行 异步任务进入一个任务队列 在同步任务形成的执行栈完成后 再执行异步任务的队列中的任务

比如主线程有 同步任务A 异步任务B 同步任务C 异步任务D 同步任务E 那么 就先执行 A C E 再执行 B D 例子如下

在这里插入图片描述

function one() {
    console.log(1)
}

function two() {
    return new Promise(function(resolve) {
        resolve(2)
    })
}

function three() {
    console.log(3)
}

function four() {
    return new Promise(function(resolve) {
        resolve(4)
    })
}

function five() {
    console.log(5)
}
one();
two().then(() => {
    console.log(2)
});
three();
four().then(() => {
    console.log(4)
});
five()

@TOC

菜鸟教程的相应教程地址 es6菜鸟Promise对象 es6菜鸟Generator函数 es6菜鸟async函数

Promise 对象

promise可以获取异步操作的信息 主要有三种状态 pending(进行中),fulfilled(成功),rejected(失败) 完成后 可以通过resolve()返回数据 也就是定型状态 这是promise对象 在这里插入图片描述

在这里插入图片描述

resolve正常完成返回结果 reject完成失败返回结果

function test() {
    return new Promise(function(resolve, reject) {
        let i = 0;
        setTimeout(function() {
            i = 5;
            if (i == 5) {
                resolve("完成")
            } else {
                reject("失败")
            }
        }, 2000)
    })
}
test().then(res => {
    console.log(res)
})

promise.then() 其中then方法 无论执行成功还是失败都会执行 只不过成功就返回resolve(成功结果 )失败就返回reject(失败结果)

这里的setTimeout为定时器 用法为setTimeout(function(){},time) function()为你要执行的 time为触发时间 比如2000 就是2秒后触发

在这里插入图片描述

Generator 函数

使用 yield 关键字,把函数的执行流挂起,从而改变执行流程

基础用法

定义

function* 函数名(){

}

使用

let xx = 函数名()
xx.next()
xx.next()
function* func() {
    console.log("I am one");
    yield '1';
    console.log("I am two");
    yield '2';
    console.log("I am three");
    return 'ok'
}
let f = func()
for (let i = 1; i <= 4; i++) {
    console.log(f.next())
}

在这里插入图片描述 可以看到我们执行完毕 返回了ok 再次向下执行 value underfined

async 函数

基础用法

精髓就是 async await 对函数施加 async标记 在此函数内部await可实现阻塞同步等待异步

如果我们这样写

function one() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            resolve(1)
        }, 2000)
    })
}
async function testOne() {
    let data = 111;
    data = one();
    console.log(data)
}
testOne()

可以发现 data打印的是promise对象 在这里插入图片描述

加上await data = await one()

function one() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            resolve(1)
        }, 2000)
    })
}
async function testOne() {
    let data = 111;
    data = await one();
    console.log(data)
}
testOne()

打印的是resolve返回的1 这里await会等待one执行完成 在这里插入图片描述

小示例

如果不使用 promise async 读取文件

<input type="file" id="upFile" onchange="upFiles()" />
<script>
    function upFiles() {
        let data = "空的";
        let file = document.getElementById("upFile").files[0]
        if (file) {
            let filereader = new FileReader();
            filereader.readAsDataURL(file)
            filereader.onload = function() {
                data = filereader.result;
                // console.log(filereader.result)
            }
        }
        console.log(data)
    }
</script>

可以发现这里的data并没有变化 是没有执行吗? 是因为先执行了同步任务 打印完data后 才执行赋值 在这里插入图片描述

我们 换个写法 使用 promise和async

function getData(filereader) {
    return new Promise(function(resolve) {
        filereader.onload = function() {
            resolve(filereader.result)
        }
    })
}

async function upFiles() {
    let data = "空的";
    let file = document.getElementById("upFile").files[0]
    if (file) {
        let filereader = new FileReader();
        filereader.readAsDataURL(file)

        data = await getData(filereader)
    }
    console.log(data)
}

在这里插入图片描述

欢迎访问博客代码哈士奇 技术 聊天 交流群 974178910 前端交流群 535620886

预览图
评论区

索引目录