promise

1,什么是promise?

1,抽象表达:promise是js中进行一步编程的新的解决方案(旧的是—纯回调函数)
2,具体表达
语法上讲:promise是一个构造函数,可以new创建一个 promise
功能上讲:promise对象用来封装一个异步操作并可以获取其结果
3,目的:解决回调地狱问题
注:promise 状态改变中,resolved为成功回调, reject失败回调;只有两种状态,且一个promise对象只能变一次;无论变为成功还是失败,都会有一个结果数据;成功的结果数据一个称为 value ,失败的结果数据一般称为 reason
4,promise 的基本使用

var  promise=new Promise(function(){})

注:这是一个异步操作,其中function 内部写的就是具体的异步操作

2,why—为什么用?

1,作用:指定回调函数的方式更加灵活

旧的:必须在启动异步任务前指定
promise:启动异步任务=>返回promise对象=>给promise对象绑定回调函数
注:promise的实例是一个异步操作,无法使用return把操作的结果返回给调用者,这时候,只能使用回调函数的形式,来把成功 或 失败的结果,返回给调用者;

2,promise 原型上的 .then 方法是预定为后面成功和失败的回调,成功的回调必须传,失败的回调可以不传
3,支持链式调用,可以解决回调地狱问题
4,async / await:回调地狱的终极解决方案

getFIiePath(path){
            var  promise= new Promise(function(resolve,reject){
                if (err) return reject ( err ){ }
                resolve(data){ }
            })
              return promise;
        },
getFIiePath(xxx_路径).then( succse( data){  } , fail(err ){  } )

3,怎么用?

callback:这个只是表示他是一个回调函数的占位符,他只是作为一个参数,具体的形式,是看传的函数是什么 callback 只有两种形式:成功回调(第一个位置),失败回调(第二个位置)
1,上一个 .then 中,return 一个新的 promise 实例,可以继续用下一个 .then 来处理
2,promise 一旦出错,进行捕获,继续执行下去,否则,不会继续执行
3,如果不想前面的 promise 出错,操作被终止,可以为每个 promise 指定失败的回调捕捉

getFile("./files/1.txt")
        .then(function(data){
            console.log(data)
            return getFile("./files/2.txt")
        })
        .then(function(data){
            console.log(data)
            return getFile("./files/3.txt")
        })
        .then(function(data){
            console.log(data) 
        })
        .catch(function(err){  
       // catch 捕获 promise 中抛出的所有异常
            console.log(err)
        })

注:出错类型在下面有补充说明,
4,promise 的工作流程

promise.png

4,async和await — 异步函数

同步函数:立即执行,完全执行完了才结束,不会放入回调队列中
异步函数:不会立即执行,会放入回调队列中将来执行

1,普通函数 中使用 async关键字,就会变为异步函数,
2,异步函数中,return 后面默认被包裹了一层 Promise 对象,return关键字代替了 reslove 方法
3,异步函数中,使用 throw 关键字抛出程序异常,
4,调用异步函数再链式调用 .then方法,获取异步函数中执行结果
5,调用异步函数再链式调用 .catch方法,获取异步函数中错误信息

async function fn(){
      throw '发生了写错误'; // 当 throw 方法执行之后,后面的方法就不会继续执行
      return 123
 }
fn().then(function(data){
    console.log(data); // 123
}).catch((err)=>{
   console.log(err)
})

await 关键字

1,await只能出现在async异步函数中
2,await Promise await后面只能写Promise对象,写其他的API不可以,
3,await 关键字可以暂停异步函数向下执行,等待Promise返回结果后,再向下继续执行函数
3,await使用异步代码,但是执行时是按照同步形式代码执行顺序

async function p1(){
    return 'p2'
}
async function p2(){
    return 'p3'
}
async function p3(){
    return 'p3'
}
function fn(){
     let res1 = await p1()
     let res2 = await p2()
     let res3 = await p3()
}

注:上段代码执行的顺序是,先执行 p1() ,得到结构之后赋值给res1,再执行执行 p2() ,得到结构之后赋值给res2,执行 p3() ,得到结构之后赋值给res3,虽然是异步函数,但是按照顺序依次执行

2,Promise.all ( );得到多个promise的结果

function  test(x){
    return new Promise((resolve, reject)=>{
        if(x >3){
              resolve()
            }else{
              reject()
        }
   })
}
Promise.all(test(5),test(2)).then((res)=>{
  console.log('成功的回调1')
}).then(()=>{
  console.log('成功的回调2')
}).catch(()=>{
  console.log('失败的回调')
})

3,Promise.race( ):返回最先完成的一个任务结果,其他任务依然执行,但是打印不出来

function  test(x){
    return new Promise((resolve, reject)=>{
        if(x >3){
              resolve()
            }else{
              reject()
        }
   })
}
Promise.race(test(5),test(2)).then((res)=>{
  console.log('成功的回调1') // 只要 test(5),test(2) 任意一个返回成功,都可以打印出结果
}).then(()=>{
  console.log('成功的回调2')
}).catch(()=>{
  console.log('失败的回调')
})

4,用 await 获得多个promise结果

async function test(){
    try{
        let n = await Promise.all([text(5),text(2)])
        console.log(n)
    }catch(error){
        console.log(error)
    }
}
test()

如果你没有在async函数中写return,那么Promise对象resolve的值就是undefined,如果你写了return,那么return的值就会作为你成功的时候传入的值

promise 的缺点

  • promise一旦新建就会立即执行,无法中途取消
  • 当处于pending状态时,无法得知当前处于哪一个状态,是刚刚开始还是刚刚结束
  • 如果不设置回调函数,promise内部的错误就无法反映到外部
  • promise封装ajax时,由于promise是异步任务,发送请求的步骤会被延后到整个脚本同步代码执行完,并且将响应回调函数延迟到现有队列的最后,如果大量使用会大大降低了请求效率。

补充:

1,常见的内置错误

error:所有错误的父类型
referenceError:引用的变量不存在—引用不存在的变量会报错,如果没有捕获错误,那么下面的代码就不会继续执行
typeError:数据类型不正确的错误—设置一个变量,但是他不存在某些属性,当运行时候,会报此错
rangeError:数据值不在其所允许的范围内
syntaxError:语法错误—不符合常规语法的错误会报错

2,错误处理
1,捕获错误:try ... catch
如果程序出错,还行让程序继续执行,那么使用捕获错误

 try {
          let b;
          console.log(b.xxx)
        } catch (error) {
            console.log(error)
        }
  console.log('出错之后,还执行的错误,因为上面捕获了')

注:每个error都有两个属性,message与stack
2,抛出错误:throw error

 try {
     something()
 } catch (error) {
      console.log(error.message)
 }
function something() {
     if (Date.now() % 2 === 1) {
        console.log('当前时间为奇数,可以执行')
     } else {
        throw new error('当前时间为偶数,不可以执行')
     }
} 

3,错误对象
message属性:错误相关信息
stack属性:函数调用栈记录信息

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,875评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,569评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,475评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,459评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,537评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,563评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,580评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,326评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,773评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,086评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,252评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,921评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,566评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,190评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,435评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,129评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,125评论 2 352

推荐阅读更多精彩内容

  • async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 async函数对 ...
    Xyaleo阅读 1,092评论 0 4
  • 简单介绍下这几个的关系为方便起见 用以下代码为例简单介绍下这几个东西的关系, async 在函数声明前使用asyn...
    _我和你一样阅读 21,220评论 1 24
  • 透彻掌握Promise的使用,读这篇就够了 Promise的重要性我认为我没有必要多讲,概括起来说就是必须得掌握,...
    穿牛仔裤的蚊子阅读 2,129评论 0 16
  • 一、为何会有Promise? 在JavaScript的世界中,所有代码都是单线程执行的。由于这个“缺陷”,导致Ja...
    Wandering_b4f7阅读 743评论 1 1
  • 回调地狱 首先有一个需求,如何连续根据函数的依赖关系,实现多个函数的连续调用,而且要在前置函数完成的情况下。例如 ...
    fejavu阅读 761评论 0 3