promise用于解决回调地狱,同时让代码更加高效简洁
1.用promise封装ajax请求
`
//1. 接口地址:
let url = 'http://localhost:8080/about'
//2.创建对象
const xhr = new XMLHttpRequest();
//3.初始化
xhr.open('GET', url)
//4.发送请求
xhr.send()
//5.绑定事件
xhr.onreadystatechange = function() {
//判断
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
} else {
console.error(xhr.status);
}
}
}
`
2.promise.prototype.then
` const p = new Promise((resolve, reject) => { setTimeout(() => { let num = parseInt(Math.random() * 10) if (num % 2 === 0) { resolve(num) } reject(num) }, 1000) }) //调用then方法 then方法的返回结果是promise对象,对象的状态由回调函数的执行结果决定 //1.如果回调函数的返回结果是非promise类型的属性,状态为成功,返回值为对象的成功的值 let result = p.then((data) => { console.log(data, 'data'); //1.此处返回非promise对象的数据,则result输出状态为成功(resloved) // return 123 //2.如果返回的是promise对象,则返回的promise对象成功即成功失败则失败 //return Promise.reject('我是失败') //如果是抛出错误则也是失败状态 throw new Error('我出错啦') }, (err) => { console.warn(err, 'err'); }) console.log(result, 'result');
输出结果:
`
3.链式调用 eg:
const p=new Promise((resolve,rejcet)=>{ let data='成功' reslove(data) })
p.then(value=>{ //处理异步操作 }).then( value=>{ //处理异步操作 } )
4.promise对象catch方法
catch 方法可以理解为p.then()的语法糖
eg:
const p=new Promise((resolve,rejcet)=>{
let data='失败'
reject(data)
})
p.catch((err)=>{
console.warn(err)
})
输出结果:
5.promise.all接受多个promise对象,即处理多个异步操作
Promise.prototype.all=function(promises){
return new Promise((resolve,reject)=>{ let len =promises.length let count=0 let result=new Array(len) for(let i=0;i<len;i++){ Promise.resolve(promisesp[i]).then( (value)=>{ result[i]=value count++ if(count===len) resolve (result) } ), (err)=>{
reject(err) }
} }) }