0
点赞
收藏
分享

微信扫一扫

AJAX-Promise

史值拥 03-25 17:30 阅读 2

定义

Promise对象用于表示(管理)一个异步操作的最终完成(或失败)及其结果值。

好处:1)成功和失败状态,可以关联对应处理程序 2)了解axios函数内部运作机制 3)能解决回调函数地狱问题

语法:

//1.创建Promise对象
const p=new Promise((resolve,reject)=>{
    //2.执行异步任务-并传递结果
    //成功调用:resolve(值) 触发then()执行
    //失败调用:reject(值) 触发catch()执行
})
//3.接收结果
p.then(result=>{
    //成功
}).catch(error=>{
    //失败
})

new Error('错误信息'):创建一个错误对象

三种状态

概念:一个Promise对象,必然处于以下几种状态之一

1)待定(pending):初始状态,既没有被兑现,也没有被拒绝

2)已兑现(fulfilled):意味着,操作成功完成

3)已拒绝(rejected):意味着,操作失败

注意:Promise对象一旦被兑现/拒绝就是已敲定了,状态无法再被改变

Promise对象创建时,Promise对象里的代码就会在执行了

//创建Promise对象
const p=new Promise((resolve,reject)=>{
    //执行XHR异步代码,获取省份列表
    const xhr = new XMLHttpRequest()
    xhr.open(请求方式,URL)
    xhr.addEventListner('loadend',()=>{
        //响应状态码为2xx都是成功响应
        if(xhr.status >=200 && xhr.status < 300){
            resolve(JSON.parse(xhr.response))
        }else{
            reject(new Error(xhr.response))
        }
    })
    xhr.send()
})

//关联成功或失败函数,做后续处理
p.then(result=>{
    //成功
}).catch(error=>{
    //错误对象要用console.dir详细打印
    console.dir(error)
})

同步代码和异步代码

同步代码

逐行执行,需原地等待结果后,才继续向下执行

异步代码

调用后耗时,不阻塞代码继续执行(不必原地等待),在将来完成后触发一个回调函数

接收结果:依靠回调函数

异步代码:setTimeout/setInterval、事件、AJAX

回调函数地狱

概念:在回调函数中嵌套回调函数,一直嵌套下去就形成了回调函数地狱

缺点:可读性差,异常无法捕获,耦合性严重,牵一发动全身

Promise链式调用

概念:依靠then()方法会返回一个新生成的Promise对象特性,继续串联下一环任务,直到结束

细节:then()回调函数中的返回值,会影响新生成的Promise对象最终状态和结果

好处:通过链式调用,解决回调函数嵌套问题

应用:每个Promise对象中管理一个异步任务,用then返回(return)Promise对象,串联起来

举报

相关推荐

0 条评论