诚之和:Promise的介绍及基本用法是什么

这期内容当中小编将会给大家带来有关Promise的介绍及基本用法是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

Promise是ES6引入的异步编程的新解决方案。语法止Promise是-一个构造函数,

用来封装异步操作并可以获取其成功或失败的结果。

Promise 构造函数: Promise (excutor) {}

Promise.prototype.then 方法

Promise.prototype.catch 方法

Promise的基本使用

实例化Promise

newPromise()

在实例化的时候接受一个参数, 这个参数是一个函数。

这个函数有两个形参,resolve 和 reject

varpromise =newPromise((resolve,reject) =>{// 里面用于处理异步操作})

我们在这里使用定时器来模拟异步操作

promise有三种状态,分别是:进行中、成功、失败。

varpromise =newPromise((resolve,reject) =>{// 这是一个异步操作setTimeout(()=>{// 这里模拟获取数据vardata ='获取的数据'// 在得到数据之后我们可以调用resolve和reject方法来改变promise对象的状态resolve(data)// resolve可以将promise对象的状态改为成功,reject()可以promise将对象状态改为失败},1000);})

promise的then方法

当promise对象的状态为成功或者失败时可以调用then方法

then方法接受两个参数,而且两个参数都是函数类型的值

promise对象的状态为成功时,会调用then方法的第一个参数

也是就说promise对象的状态为失败时,会调用then方法的第二个参数

第二个参数时可选的,如果不需要捕获失败可以省略

参数分别有一个形参,成功的函数叫value, 失败的err

promise.then(value=>{// 当异步函数里面调用了resolve(data),也是就说promise对象的状态为成功时,会调用then方法的第一个参数console.log(value);// 'hello world' value就是resolve()方法传递过来的数据},err=>{// 当异步函数里面调用了reject(data),也是就说promise对象的状态为失败时,会调用then方法的第二个参数console.log(err);// err就是reject()方法传递过来的数据 })

调用then方法then方法的返回结果是Promise 对象,对象状态由回调函数的执行结果决定

如果回调函数中返回的结果是非promise类型的属性,状态为成功,返回值为对象的成功的值

letdata = promise.then((val) =>{// console.log(val.result);// 返回非Promise的情况// return val.result// 返回Promise的情况returnnewPromise((resolve, reject) =>{// resolve('ok')reject('err')    })},err=>{console.log(err);})// 返回非Promise的情况 状态为成功,返回值为对象的成功的值 // 返回结果是Promise 对象,对象状态由回调函数的执行结果决定// 抛出错误,状态为失败console.log(data);

所以then可以链式调用使用方法可参见下面promise应用示例。

promise的catch方法

promise的catch方法是then(null, rejection)的别名,用于指定发生错误时的回调

Promise对象的状态为resolve,就会调用then方法的指定回调函数

constpromise =newPromise((resolve, reject) =>{    resolve('ok')})promise.then(val=>{console.log(val);// ok}).catch(err=>{console.log(err);})

如果promise的状态为rejected就会调用catch方法的回调函数来处理这个问题。

constpromise =newPromise((resolve, reject) =>{    reject('err')})promise.then(val=>{console.log(val);}).catch(err=>{console.log(err);// err})

如果then方法在运行中出现错误也会被catch方法捕获

constpromise =newPromise((resolve, reject) =>{    resolve('err')})promise.then(val=>{console.log('ok');// okthrow'出错了!!'// then里面抛出的错误会继续被catch捕获}).catch(err=>{console.log(err);// 出错了!!})

promise对象的错误具有冒泡的性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch捕获。

constpromise =newPromise((resolve, reject) =>{    resolve('ok')})promise.then(val=>{returnnewPromise((resolve, reject) =>{        reject('err')    })}).then(val=>{returnnewPromise((resolve, reject) =>{        reject('err')    })}).catch(err=>{// 以上产生的错误都可以被catch捕获到console.log(err);// err})

一般来说,不要在then方法中定义rejected状态回调函数(即then的第二个参数),而应总是使用catch方法。

promise应用 

promise读取文件,多个文件连续调用

在这个例子中我们用到了Node.js的文件模块

// 读取文件信息constfs =require('fs')

在下面代码中我们使用了promise包装了异步函数

我们先来看看正常的文件读取操作

// 读取文件信息constfs =require('fs')// 如果读取失败err就是一个错误对象,读取成功data就是数据fs.readFile('./01.txt',(err, data) =>{// 判断是否出现错误,如果读取错误就打印错误对象。if(err) {console.log(err);return}console.log(data.toString());})

我们如果想在读取成功之后继续读取文件,就需要在回调函数中继续使用fs.readFile...去读取文件,嵌套层次一多,这样一来就会形成回调地狱。 

接下来我们使用Promise的方式来读取文件

// 读取文件信息constfs =require('fs')constpromise =newPromise((resolve, reject) =>{    fs.readFile('./01.txt',(err, data) =>{if(err)returnreject(err)        resolve(data)    })}) promise.then(val=>{console.log(val.toString());// 返回一个Promise对象returnnewPromise((resolve, reject) =>{        fs.readFile('./02.txt',(err, data) =>{if(err)returnreject(err)            resolve(data)        })    })},err=>{console.log(err);})// 上一个then里面返回的是一个promise对象,我们可以继续.then.then(val=>{console.log(val.toString());returnnewPromise((resolve, reject) =>{        fs.readFile('./03.txt',(err, data) =>{if(err)returnreject(err)            resolve(data)        })    })},err=>{console.log(err);}).then(val=>{console.log(val.toString());},err=>{console.log(err);})

promise封装ajax请求

封装了ajax请求,使用then获取结果,让代码看起来更加简洁,解决了回调地狱的问题

constpromise =newPromise((resolve, reject) =>{// 创建对象constxhr =newXMLHttpRequest()// 初始化xhr.open("GET",'https://api.apiopen.top/getSongPoetry?page=1&count=20')// 发送xhr.send()// 绑定事件处理响应结果xhr.onreadystatechange =function(){// 判断// 进入最后一个阶段,所有的响应体都回来了if(xhr.readyState ===4) {// 判断响应码if(xhr.status >=200&& xhr.status <300) {// 表示成功// console.log(JSON.parse(xhr.response));resolve(JSON.parse(xhr.response))            }else{                reject(xhr.status)            }        }    }})// 指定回调promise.then((val) =>{console.log(val);},err=>{console.log(err);})

上述就是小编为大家分享的Promise的介绍及基本用法是什么了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

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

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,698评论 1 56
  • Promise.then 函数接受两个函数,第一个函数执行成功回调(onResolve),第二个函数执行错误回调(...
    三七_小九阅读 2,178评论 0 0
  • > 简述: ## 什么是Promise? -Promise是用来处理异步的; -Promise就是承诺,对未来的承...
    风雪中的兔子阅读 377评论 0 0
  • 首先说一下promise 是什么? 1、本质是构造函数中主要用于异步计算 2、可以将异步操作队列化,按照期望的顺序...
    只是墨辰阅读 2,385评论 0 0
  • promise是什么? 1、主要用于异步计算 2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果 3...
    欣欣程序猿阅读 144评论 0 0