概念:
promise是异步编程的一种解决方案.
(就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数)
异步:之前实现异步操作的方式.①回调函数②事件触发
作用:解决异步操作问题.
特点:
(1)对象的状态不受外界影响.promise对象代表一个异步操作,
有三种状态: pending(进行中).fulfilled(已成功),rejected(已失败)
只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态.
(2)对象的状态,一旦改变,就不会再变,任何时候都可以得到这个结果.
(promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pendig变为rejected.)
基本用法:
(1)通过new promise对象可以创建promise实例
const promise = new Promise(function (resolve,reject){ })
(2)参数说明:promise对象接收一个函数做参数,并且这个函数的参数分别是resolve和reject,它们是两个函数,由javascript引擎提供
(3)resolve函数的作用.在异步操作成功时调用,并将异步操作的结果,作为参数传递出去
(4)reject函数的作用.在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去
说明:
promise实例生成以后,可以用then方法,分别指定成功和失败的回调函数
分别利用回调函数和promise模拟1秒通信(在执行完打印'hello',1s再打印'world')
①回调函数发法: function ajax (callback){
console.log('hello')
setTimeout(function(){
callback&&callback()
},1000)
}
ajax(function(){
console.log('world')
}
②promise方法 function ajax(){
console.log('hello')
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve()
},1000)
})
}
ajax().then(function(){
console.log('world')
})
.then()是promise实例的一个方法,表示要执行的下一步操作
promise实例的方法
(1)then(参数1,参数2)
作用:为promise实例添加状态改变时的回调函数
参数1是成功的回调函数,参数2是失败的回调函数
返回值:then方法返回的是一个新的promise实例,.then方法可以采用链式操作
(2)catch()
作用:
指定发生错误时的回调函数,作用等同于then方法的第二个参数
let ajax = function(num){
return new Promise(resolve,reject)=>{
if(num>5){
resolve(num)
}else{
throw new Error('出错了')
}
})
}
ajax(2).then(function(num){
console.log(num)
}).catch(function(err){
console.log(err)
}
Promise风格的ajax
function promiseAjax(json){
let url = json.url
let type = json.type || 'get'
let parmas = json.data || {}
let str = ''
for(let k in parmas){
str += k+'='+parmas[k]+'&'
}
return new Promise((resolve.reject)=>{
let xhr = new XMLHttpRequest()
if (type.toLowerCase()==='get'){
xhr.open('get',`${url}?${str}time=${Data.now()}`,true)
xhr.send()
}else if(type.toLowerCase()==='post'{
xhr.open('post',url,true)
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send(str.substring(0,str.lastIndexOf('&')))
}
xhr.onreadystatechange = function (){
if(this.readyState===4){
if(this.status>=200 && this.status<300){
resolve(JSON.parse(this.reponseText)
}else{
let error = new Error()
error.status = this.status
reject(error)
}
}
}
})
}
Promise的类(高级)方法
(1)promise.all()
将多个promise实例,包装成一个新的promise实例,简单的来说就是多个异步操作都成功则才执行成功的回调,否则执行失败的回调
参数说明: 接收一个数组为参数,数组的每一项都是promise实例
(2)promise.race()
竞赛,将多个promise实例,包装成一个新的promise实例,只要有一个实例率先改变状态,promise的状态就跟着改变
参数说明: 接收一个数组作为参数,数组的每一项都是promise实例
例如:请求三张网络图片有一张加载完,所有图片完全加载完添加到页面上
封装加载图片的方法
function loadImg(src){
return new Promise((resolve,reject)=>{
var img = document.createElement('img')
img.src = src
img.onload = function(){
resolve( img )
}
img.error = function(){
reject()
}
}
}
Promise.all([
loadImg
('图片路径'),
loading
('图片路径')
]).then(function(imgs){
imgs.forEach((img)=>{
document.body.appendChild(img)
}
}
Promise.race([
loadImg
('图片路径')
loadImg
('图片路径')
]).then(function(img){
document.body.appendChild(img)
}
promise缺点
①一旦新建就会立即执行,无法中途取消
②如果不设置回调函数,promise内容抛出的错误,不会反应到外部
③当处于pending状态时,无法得知目前进展到哪一个阶段
promise的链式操作代码繁多,有一个方法可以解决既简单又方便
Async:异步主要是将异步的代码变成同步的写法
await等待 await promise对象
await异步参数
async function fn(){
let ret = await promiseAjax({url:'data/arr.txt'})
console.log(ret)
ret = await promiseAjax({url:'data/list/txt'})
console.log(ret)
}
fn()
需要引入jquery.js
async function fn(){
try{
let ret=await new Promise((resolve,reject)=>{
//....
if(成功了){
resolve(成功的数据)
}else{
reject(错误的信息)
}
})
}.catch(e){
console.log(e);
}finally{
//不管有没有错误这里的代码都会执行
}
}
