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还有更高级的用法，想了解更多，请阅读MDNPromisedeveloper.mozilla.org
