1.0 同步与异步 【了解】

• 同步： 具有阻塞性

• 异步： 异步代码同时执行，谁跑的快谁就先执行完，异步与同步相遇，先让同步执行完毕后再执行异步代码

• 异步分类：(执行完成时间不确定或代码执行时间过长)

  • 定时器

  • 事件处理函数

  • 异步ajax

2.0 Promise -- 解决回调地狱 【掌握】

2.1什么是Promise？

他是一个构造函数，通过new 创建实例使用，他有3个状态，进行中、已成功、已失败，状态一旦确定就凝固了

2.2 语法结构

 new Promise((resolve,reject)=>{ // 成功回调，失败的回调// 处理异步的内容if(得到的异步结果===true){// 符合你的预期resolve(成功返回的数据)}else{reject('失败的错误')}})
.then((data)=>{// data 就是你成功返回的数据})
.catch((err)=>{// err 就是你失败后的错误})
​

 

2.3 Promise的其他方法

Promise.all() ：

同时请求多个Promsie任务，只有全部成功才会成功，如果有一个失败那就全部失败

const p1 = new Promise(resolve=>{// 异步操作setTimeout(()=>{resolve()},1000)
})
const p2 = new Promise((resolve,reject)=>{// 异步操作setTimeout(()=>{reject('失败')},1500)
})
Promise.all([p1,p2])
.then(res=>{// 只有全部成功才会成功，如果一个失败，就全部失败
})
.finally(() => {console.log('你是最后的');
})

 

Promise.race() :

同时请求多个Promise任务，返回跑的最快的那个，无论成功与否

// race 赛跑const p11 = new Promise(resolve => {setTimeout(() => {resolve('p11 success')}, 1800)})const p12 = new Promise(resolve => {setTimeout(() => {resolve('p12 成功')}, 1500)})const p13 = new Promise((resolve, reject) => {setTimeout(() => {reject('p13 失败')}, 1000)})
​// 看谁跑的快就返回谁Promise.race([p11, p12, p13]).then(res => {console.log(res);}).catch(err => {console.log(err);}).finally(() => {console.log('你是最后的');}) 

 

Promise.finally() :

无论成功与否，都会执行

3.0 axios 【掌握】

基于Promise的Http请求库

语法结构：

get:

axios.get('url?参数='+参数值)
.then(res=>{})
​
axios.get('url',{params:{键名：键值，键名1：键值1}
})

post:

axios.post('url',{键名：键值，键名1：键值1})

配置项写法：

axios({method: '请求方式 get post',url: '请求地址',// 如果你是get请求params:{键名：键值，键名1：键值1},// 如果你是post请求data:{键名：键值，键名1：键值1}
})
​

 

参数配置

baseURL :'基础地址'
    axios.defaults.baseURL= 'http://139.9.177.51:3701'
timeout : 超时时间ms
    axios.defaults.timeout = 15000

axios解决回调地狱

 

4.0 async 和 await 【重点】

async 音译：异步

await 音译：等待

4.1 语法结构[背]

• async 用于修饰函数，表示该函数里存在异步操作

• await在async修饰的函数中，必须连用

• await 用于修饰Promise

  

   

 // async 和 await 实现const fn = async () => {// 请求a.json得到codeconst res = await axios('./serve/a.json')const { code } = res.data// 携带code 请求b.json 得到idconst res1 = await axios(`./serve/b.json?code=${code}`)const { id } = res1.data// 携带id 请求c.json 得到dataconst res2 = await axios(`./serve/c.json?id=${id}`)document.querySelector('h1').innerHTML = res2.data.data}fn()

async和awite解决回调地狱