JavaScript之Promise

1.出现的意义：解决回调地狱（在回调函数中嵌套回调）
2.promise的基本使用：promise是一个构造函数，通过new关键字实例化对象

语法： new promise((resolve,reject)=>{})；promise接收一个函数作为参数，在参数函数中接收两个参数：resolve，reject

3.promise实例有两个属性：state：状态 result：结果
4.promise的三种状态：

第一种状态：pending（准备，待解决，进行中）
第二种状态：fulfilled（已完成，成功）
第三种状态：rejected（已拒绝，失败）

5.promise状态的改变：通过resolve()和reject()改变当前promise对象的状态

const p = new promise((resolve,reject)=>{
	resolve('参数');  //调用函数，使当前promise对象的状态改为fulfilled
	reject('参数');  //调用该函数，使当前promise对象的状态改为rejected
})
//promise状态的改变是一次性的，当调用了resolve()改变为fulfilled之后再调用其他就没用了

6.Promise的实例方法： .then(), .catch() .finish()

1.当promise的状态是fullfilled时执行then方法；当状态时rejected时执行catch对错误进行处理
2.then()方法第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数
then方法返回的是一个新的Promise实例，也就是promise能链式书写的原因

const p = new Promise((resolve,reject)=>{
            resolve('成功调用了');
            //reject('失败调用了')
        })
     p.then((value)=>{
            console.log('成功了',value) //value参数就是resolve的参数，相当于形参对应实参
        },
        (err)=>{
            console.log('失败了',err)  //err就是rejected的参数 相当于形参对应实参
        })

//当promise的状态没有改变，是不会执行then方法的，即promise没有执行resolve()或者reject()，状态是pending状态,即以上代码是没有执行的

3.catch方法在什么时候会被执行？
① 当执行rejected()时候
② 当promise出现错误代码时
③ 手动输出错误
catch：正常返回时候状态也是fulfilled，报错的时候才是rejected,而不是执行了catch就是状态为rejected
4.finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

7.Promise的prototype原型链方法(静态方法)：resolve(),reject(),all(),race()

①.resolve()方法：方法返回一个以给定值解析后的Promise 对象，实例状态为fullfilled
②.reject()方法：Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected

const p = Promise.reject('出错了')

等同于
const p = new Promise((resolve, reject) => reject('出错了'))

③ all()方法：方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例

const p = Promise.all([p1, p2, p3])
//实例p的状态由p1,p2,p3决定，分两种情况：
//只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数
//只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数

④ reca()方法：该方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例

const p = Promise.race([p1, p2, p3])
//1.只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变
//2.率先改变的 Promise 实例的返回值则传递给p的回调函数

⑤ any()方法：接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise 和AggregateError类型的实例，它是 Error 的一个子类，用于把单一的错误集合在一起。本质上，这个方法和Promise.all()是相反的。

const pErr = new Promise((resolve, reject) => {
  reject("总是失败");
});

const pSlow = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "最终完成");
});

const pFast = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "很快完成");
});

Promise.any([pErr, pSlow, pFast]).then((value) => {
  console.log(value);
  // pFast fulfils first
})

8.promise解决回调地狱

 function getData(url,data={}){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    method:'GET',
                    url:url,
                    data:data,
                    success:function(res){
                        //修改promise的状态为成功，修改promise的结果res
                        resolve(res)
                    },
                    error:function(res){
                        reject(res)
                    }
                })
            })
        }
        getData('data1.json').then((data)=>{
            const {name} = data;
            console.log(name)
            return getData('data2.json',name)
        }).then((data)=>{
            const {phone} = data;
            console.log(phone)
            return getData('data3.json',phone)
        }).then((data)=>{
            const {sex} = data
            console.log(sex)
        })

async、await与Promise

1.执行async函数，返回的都是promise对象

async function test1(){
return 1  //自动封装乘promise对象
}
async function test2(){
retuen Promise.resolve(1)
}
// 两个函数返回的都是promise对象，是一样的

2.Promise.then 成功的情况对应 await；await后面跟promise对象

async function test3(){
	const p3 = Promise.resolve(3)
	p3.then(data=>{
		console.log('data',data)
})

const data = await p3  // 与p3.then()是一样的，都是输出3
console.log('data',data)  
}

3.await 后面跟一个值

async function test4(){
	const data = await 4  //相当于执行了 await Promise.resolve(4) ;又因为await相当于Promise.then
console.log(data)   //4
}

4.await后面跟异步函数

async function test5(){
	const data = await test1()  
	console.log(data)  //输出1
}

5.promise.catch一场情况对应try…catch

async function test6(){
	const p6 = Promise.reject(6)
	try{
		const data6 = await p6
		console.log(data6)
	}catch(e){
		console.log('e',e)  //捕获到错误，输出6
		}
}

6.async(异步)函数执行的顺序问题

async function test1(){
	console.log('a')
	const result = await test2()  //await后面的代码，可以看成是放在异步里面的代码，相当于放在setTimeout里面
	console.log('result:',result)
	console.log('b')
} 
async function test2(){
	console.log('c')
}
console.log('d')
test1()
console.log(e)

//执行顺序为：d,a,c,e,result:underfined,b

7.Promise的prototype原型链方法(静态方法)：resolve(),reject(),all(),race()

async、await与Promise

6.async(异步)函数执行的顺序问题

相关推荐