1、Promise 、axios 、async和await

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得到code
        const res = await axios('./serve/a.json')
        const { code } = res.data
        // 携带code 请求b.json 得到id
        const res1 = await axios(`./serve/b.json?code=${code}`)
        const { id } = res1.data
        // 携带id 请求c.json 得到data
        const res2 = await axios(`./serve/c.json?id=${id}`)
        document.querySelector('h1').innerHTML = res2.data.data
    }
    fn()

async和awite解决回调地狱