学习promise

69 阅读1分钟

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');

    输出结果:
    
    

image.png `

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)

})

输出结果:

image.png

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) }

} }) }