用promise封装ajax_ajax和promise的基础封装

1.AJAX封装

ajax=(method,url,options)=>{

const {seccess,fail}= options //析构赋值 const request = new XMLHttpRequest();

request.open(method,url);

request.onreadystatechange = () => { //readyState属性变化是,会触发这个函数 if(request.readyState === 4){

//成功调用seccess,失败调用fail if(request.state < 400){

success.call(null, request.response)

}else(request.state >= 400){

fail.call(null, request, request.status)

}

}

}

request.send()

}

ajax('get', '/xxx', { //调用 success(response){}, fail: (request, status)=>{}

//success是function缩写,fail是箭头函数,这两种都可以})

AJAX调用的不足之处:不规范,名称弄得五花八门,有seccess加fail的,有seccess加error,还有done加fail的

容易造成回调地狱,导致代码特别难懂

很难进行错误处理

怎样解决这三个问题呢?规范回调的名称和顺序

拒绝回调地狱,让代码的可读性跟强

很方便的捕捉错误

2.promise写法

ajax = () => {

retrun new promise ((resolve,reject) => {

const {success, fail} = options

const request = new XMLHttpRequest()

request.open(method, url)

request.onreadystatechange = ()=>{

if(request.readyState === 4){

// 成功调用resolve,失败调用reject

if(request.status < 400){

resolve.call(null, request.response)

}else if(request.status >= 400){

reject.call(null, request)

}

}

}

request.send()

})

}

ajax('get', '/xxx')

.then((response)=>{}, (request, status)=>{})//返回了一个.then的对象

首先要记住这5个单词:

return new promise ( ( resolve , reject) =>{ ......})

1.第一步:return new promise ( (resolve,reject) => {.....})

成功调用resolve( result ),失败调用reject( error )

resolve,reject会再次调用成功和失败函数

2.第二步

使用.then(seccess,fail)传入成功和失败函数

promise还有更高级的用法,想了解更多,请阅读MDNPromise​developer.mozilla.org343d746e3173c4d6173e374f31fd69e3.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值