Promise是ES6引入的异步编程的新解决方案。语法止Promise是-一个构造函数,
用来封装异步操作并可以获取其成功或失败的结果。
Promise 构造函数: Promise (excutor) {}
Promise.prototype.then 方法
Promise.prototype.catch 方法
实例化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方法
then方法接受两个参数,而且两个参数都是函数类型的值
promise对象的状态为成功时,会调用then方法的第一个参数
也是就说promise对象的状态为失败时,会调用then方法的第二个参数
第二个参数时可选的,如果不需要捕获失败可以省略
参数分别有一个形参,成功的函数叫value, 失败的err
promise.then(value=>{//当异步函数里面调用了resolve(data),也是就说promise对象的状态为成功时,会调用then方法的第一个参数console.log(value);//'helloworld'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的情况//returnval.result//返回Promise的情况returnnewPromise((resolve,reject)=>{//resolve('ok')reject('err')})},err=>{console.log(err);})//返回非Promise的情况状态为成功,返回值为对象的成功的值//返回结果是Promise对象,对象状态由回调函数的执行结果决定//抛出错误,状态为失败console.log(data);
所以then可以链式调用使用方法可参见下面promise应用示例。
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读取文件,多个文件连续调用
在这个例子中我们用到了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);})