Promise的基本用法(二)

  1. 什么是异步?
简单的说就是先干一件事, 中间去干其他的事,最终在回来干这件事。
  • 每一个任务都有一个或者多个回调函数(callback),前一个任务结束的时候,不是执行下一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务顺序不一致的,异步的。
function read(content){
    setTimeout(function(){
        console.log(content)
    } ,1000)
}

function read1(content){
    setTimeout(function(){
        console.log(content)
    },500)
}

read('我是read');
read1('我是read1');
console.log('我先输出') //第一个输出的
read和read1执行,read和read1的函数体中有setTimeout,它是异步的(异步不支持return)
  • 同步:就是一个任务完成之后,后边跟着一个任务接着执行;程序的执行顺序和排列顺序是一直的(会阻塞代码运行)
  1. 异步的发展流程
    1).callback:回调函数
let fs = require('fs');
fs.readFile('path', 'utf8', function (err, data) {
    if (err) {
        console.log(err)
    }
    if (data) {
        fs.readFile(data, 'utf8', function (err, data) {
            console.log(data);
        });
    }
})
会等第一个回调函数成功才会执行第二个回调函数。有多层嵌套的问题。代码不好维护修改

2).promise: 解决了回调地狱的问题,不会导致难以维护

let fs = require('fs');
function read(path){
    return new Promise(function(resolve,reject){
        fs.readFile(path,'utf8',function(err,data){
            if(err){
                reject(err)
            }else{
                resolve(data)
            }
        })
    })
}

let p = read('需要读的文件路径');
p.then((data)=>{
    console.log(data);
})

3).Generator 函数

  • 函数要用* 来标识
  • 返回结果是一个迭代器, 迭代器有一个next方法,调用next后都会返回一个done和一个叫value的属性

原理:将一个函数划分成若干个小函数,没次调用时移动指针,内部是一个条件判断,走对应的逻辑

function read(arrs){
    let index = 0; //默认先迭代第一项
    let len = arrs.length;
    return {
        next(){
            return {value:arrs[index],done:index++===len?true:false}
        }
    }
}

let it = read(['react','vue','angular']);
// it.next(); // {done:false,value:'react'}
// it.next(); // {done:false,value:'vue'}
// it.next(); // {done:false,value:'angular'}
// it.next(); // {done:true,value:undefined}
缺点:要手动next执行,才会进行下一次

解决方案:co库,可以自动的将generator进行迭代
let bluebird = require('bluebird');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile); //promise实例化
function* r() {
    let content1 = yield read('./2.promise/1.txt', 'utf8');
    let content2 = yield read(content1, 'utf8');
    return content2;
}
co(r()).then(function (data) {
    console.log(data)
})

4)async-await函数

  • ES2017 标准引入了 async 函数,使得异步操作变得更加方便。写起来就就像同步函数,而且有简便的方式处理异步
  • async 函数它其实就是 Generator 函数的语法糖。
let bluebird = require('bluebird');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile);

// 用async 来修饰函数,aysnc需要配await,await只能是promise
// async和await(语法糖)  === co + generator
async function r(){
    try{
        let content1 = await read('./2.promise/100.txt','utf8');
        let content2 = await read(content1,'utf8');
        return content2;
    }catch(e){ // 如果出错会catch
        console.log('err',e)
    }
}
// async函数返回的是promise,
r().then(function(data){
    console.log(data);
},function(err){

})

async +await解决的问题:

  • 回调地狱
  • 并发执行异步,在同一时刻同步返回结果 Promise.all
  • 解决了返回值的问题
  • 可以实现代码的try/catch(同步才可以使用try/catch);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,750评论 0 5
  • topics: 1.The Node.js philosophy 2.The reactor pattern 3....
    宫若石阅读 1,126评论 0 1
  • 什么是同步异步 同步:当我们发出了请求,并不会等待响应结果,而是会继续执行后面的代码,响应结果的处理在之后的事件循...
    liwuwuzhi阅读 450评论 1 1
  • 一个简单的rpc demo 最近在网上看到阿里巴巴2015年的中间件性能挑战赛的一个题目,实现一个简单的RPC框架...
    topgunviper阅读 1,066评论 1 10
  • 有些事情,你如果做了不一定会好,但是不做一定会不好,这类现象我把它称之为事务效益的评判法(之一)。 「之一」就意味...
    侨鹭阅读 644评论 0 3