promise用法

promise是用来完成异步编程

前言

异步操作

setTime(()=>{console.log("我是异步的")}，3000)
console,log("你可以立即看见我")
//我们会发现下面的先输出

但如果我们多次嵌套使用异步操作，就会造成回调地狱

setTimeout(function () { 
        console.log('第一层');
        setTimeout(function () {  
            console.log('第二程');
            setTimeout(function () {  
                console.log('第三层');
            }, 1000)
        }, 2000)
    }, 3000)

引入promise

这时promise就应运而生，利用promise中的fetch（）向服务器发送一个fetch（“url”）请求用来动态更新页面中的内容，也就是Ajax

返回的是一个promise（承诺）对象，承诺这个请求会在某个时刻返回数据（异步）

然后利用then方法并传递一个回调函数

promise的链式调用

fetch("url")
.then((response=>{
    response.json//接收一个返回数据response，将转换为json字符串
))
.then((json)=>{})
.then(()=>{})
.then(()=>{})
//接收到的响应数据，会在第一个then处理后，传给第二个，并一直沿着该链向下传，称为链式调用
//即使有一个很长的链，代码也是向下增长，而不是向右增长
//又是返回的格式等会有错误，我们可以在尾部加上一个catch()，当返回有任何错误，直接调用catch
.catch((error)=>{console.log("error")})
.finally()//在链的最后调用，会用来做一些清理工作

async/await 是ES7提出的基于promise的解决异步的最终方案

首先使用async关键字将函数标记为异步函数

async function f(){
await()
}
f()

async function f(){
 const response = await fetch('url')
}
//await等待promise完成之后直接返回最终结果

误区

一

async function f(){
 const promiseA = await fetch("url")
 const promiseB = await fetch("url")
}
//当同时有两个await时，会等上一个await执行结束在执行下一条
//所以我们应将所有的promise用promise.all组合起来
async function f(){
 const promiseA = fetch("url")
 const promiseB = fetch("url") 
 const[a,b]= await promise.all([promiseA,promiseB]) 
}

二 在循环中使用异步不能用forEach()/map(),要使用传统的for循环

三 await 关键字只能在异步函数async下有效