async-await等知识点

最新推荐文章于 2024-05-31 10:04:55 发布

流川枫不风流

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量121

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/YasWestmere/article/details/127874395

版权

1.promise的三种状态

1.pending 准备 resolve 成功 reject 失败

2.promise的静态方法

1.promise.all()

若结果都是resolve()则返回是数组

若值中有reject()则立刻返回失败的promise,值就是当前失败的值

2.promise.allSettled()

不管结果是成功还是失败都会返回一个数组且都有当前返回值

3.promise.race()

2.4promise的allSettled方法

<script>
    //  东市买骏马(关门)，西市买鞍鞯，南市买辔头，北市买长鞭
    //  Promise.allSettled([p1, p2,p3]) 和 Promise.all([p1, p2,p3])
    //  如果p1,p2,p3都Ok,      他们的结果是一样的
    //  如果p1,p2,p3有一个不OK，例如p1不ok,他们的结果是不一样的
    //    Promise.all([p1, p2,p3])       ===> 失败的promise，值就p1的值
    //    Promise.allSettled([p1, p2,p3])===> [p1的结果，p2的结果，p3的结果]


    let p1 = Promise.reject(1)
    let p2 = Promise.resolve(2)
    let p3 = Promise.resolve(3)

    // let p = Promise.all([p1,p2,p3])
    // console.log(p)
    let p = Promise.allSettled([p1,p2,p3])
    console.log(p)

    // 该 Promise.allSettled() 方法返回一个在所有给定的 promise 
    // 都已经fulfilled或rejected后的
    //  promise，并带有一个对象数组，每个对象表示对应的 promise 结果。
</script>

3.链式作用

 <script>
        new Promise((resolve, reject) => {
            resolve(1)
        }).then(res =>{
            return res + 2
        }).then(res => {
            return res + 3
           
        }).then(res => {
            console.log(res);
        })
  
        // new promise 返回状态是成功 值为1
        // 然后执行.then 由于返回不是new promise 所以把值传给了 第一个res 
        //  第一个res return 结果为 3
        // 又因为返回的不是promise 把第一个return 的res 传给第二个res
        // 所以第二个res 返回是 6
        // 然后.then 执行  打印为6
    </script>

4.检查ajax出错的四个地方

1.url

2.method

3.参数

4.content-type

5.promise的all方法

<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script> 
    <script>
      // 目标: 讲解Promise的all方法
      // 静态(类)方法: 直接用Promise类来调用
      // 1. Promise.all() 
      // 作用: 合并多个Promise对象, 等待所有成功后, 返回结果
      // 语法: Promise.all([promise对象1, promise对象2, ...]).then()
      // 特点: 返回最终结果是个数组, 值是按顺序对应小Promise对象的成功结果
      // 注意: 如果有1个Promise失败, 则整个Promise对象则失败
         axios.defaults.baseURL = 'http://hmajax.itheima.net'
         let p1 = new Promise((resolve, reject) => {
            setTimeout(() =>{
                resolve(100)
            },2000)
         })
         let p2 = new Promise((resolve, reject) => {
            setTimeout(() =>{
                resolve(2)
            },5000)
         })

         let p3 =  axios.get('/api/province').then(res =>{
               return res
         })
         let p = Promise.all([p1,p2,p3]).then(res => {
            console.log(res);
         })
        
    </script>

6.promise的race方法

<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script> 
    <script>

        // 静态(类)方法: 直接用Promise类来调用
        // 1. Promise.race() - 赛跑机制
        // 作用: 发起并行多个Promise对象, 等待只要任何一个成功, 返回结果执行then
        // 语法: Promise.race([promise对象1, promise对象2, ...]).then()
        // 特点: 返回第一个有结果的promise对象,不管是成功还是失败的结果
         axios.defaults.baseURL = 'http://hmajax.itheima.net'
         let p1 = new Promise((resolve, reject) => {
            setTimeout(() =>{
                resolve(100)
            },20)
         })
         let p2 = new Promise((resolve, reject) => {
            setTimeout(() =>{
                resolve(2)
            },500)
         })

         let p3 =  axios.get('/api/province').then(res =>{
               return res
         })
         let p = Promise.race([p1,p2,p3]).then(res => {
            console.log(res);
         })
        
    </script>

7.封装自己的axios函数

 <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
     <script>
        //把myaxios离得ur 和method传入进去
        function myAxios({url,method}){
          // console.log(url,method);
          const xhr = new XMLHttpRequest()
          xhr.open(method,url)
          xhr.send()
          const p = new Promise((resolve, reject) => {
            xhr.addEventListener('load',() => {
                //resolve(xhr.response)
                console.dir(xhr)
                if(xhr.status >=200 && xhr.status <400) {
                    resolve(JSON.parse(xhr.response))
                } else {
                    reject(JSON.parse(xhr.response))
                }
            })
              
          })
           return p
        }
        myAxios({
            url:'http://hmajax.itheima.net/api/province',
            method: 'GET'
        }).then(res => {
            console.log('then',res);
        }).catch(err =>{
            console.log(err);
        })
     </script>

8.案例导航

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        ul {
            list-style: none;
        }

        .container {
            width: 980px;
            margin: 0 auto;
        }

        .top {
            display: flex;
            width: 100%;
            height: 80px;
            align-items: center;
            justify-content: space-around;
            position: relative;
        }

        .top>li {
            text-align: center;
        }

        .top>li>a {
            border-bottom: 1px solid transparent;
        }

        .top>li:hover>a {
            border-color: #27ba9b;
            color: #27ba9b;
        }

        .top>li:hover>.sub {
            opacity: 1;
            transform: scale(1, 1);
        }

        .sub {
            position: absolute;
            left: 0;
            top: 80px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            display: flex;
            align-items: center;
            height: 100px;
            opacity: 0;
            transform: scale(1, 0);
            transform-origin: top center;
            transition: all 0.3s .1s;
        }

        .sub li {
            width: 120px;
            text-align: center;
        }

        .sub li a {
            display: block;
            font-size: 14px;
            padding-top: 8px;
        }

        .sub li a span {
            display: block;
        }

        .sub li a img {
            width: 60px;
            height: 60px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="top" id="top">
            <!-- <li>
        <a href="javascript:;">首页</a>
        <ul class="sub">
          <li>
            <a href="javascript:;">
              <span>砂锅厨具</span>
              <img src="https://yanxuan.nosdn.127.net/3102b963e7a3c74b9d2ae90e4380da65.png?quality=95&imageView" alt="">
            </a>
          </li>
        </ul>
      </li> -->
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
    <script>
         axios.defaults.baseURL= 'http://ajax-api.itheima.net' 
         axios.get('/api/category/top',).then(res =>{
            //console.log(res);
            const arr = res.data.data
            console.log(arr);
          const arrAjax = arr.map(item => axios.get('/api/category/sub?id='+item.id))
              console.log(arrAjax);
              Promise.all(arrAjax).then(res => {
                console.log(res);
                let str = res.map(item => {
                     const p = item.data.data
                 const lis = p.children.map(subitem => {
                       return `<li>
               <a href="javascript:;">
                 <span>${subitem.name}</span>
                 <img src="${subitem.picture}" alt="">
               </a>
             </li>`
                    }).join('')
                    return `
             <li>
                   <a href="javascript:;">${p.name}</a>
                   <ul class="sub">
                   ${lis}
                 </ul>
             </li>
                    `
                }).join('')
                document.querySelector('#top').innerHTML= str
              })
         })
    </script>
</body>

9.async await

作用:替代.then且可以获取到值,后期更加方便优化代码

<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
    <script>
        
        async function fn(){
            const p = await axios.get('http://ajax-api.itheima.net/api/category/top',)
            console.log(p);
        }
          fn()

          let p = new Promise((resolve, reject) => {
            setTimeout(() =>{
               resolve(100)
            },2000)
          })
           async function fn1() {
            const reslut = await p
            console.log(reslut);
           }
             fn1()
    </script>

10.async await 特点-异步

<script>

    const p = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(2)
        }, 2000)
    })

    // try {
    //     // 这里放可能在执行中报错的代码
    //     // 如果报错会终止代码继续执行, 直接跳转进catch里执行
    // } catch (err) {
    //     // err接收try大括号内报错抛出的异常代码
    // }
    // 
    // await只能拿成功状态的promise的值，如果遇到了失败状态的promise，就要 try ... catch 
    async function myFn(){
        try {
            const result = await p
            console.log('result', result)
        } catch(err){
            console.log('err', err)
        } 
    }

    myFn()
    

// console.log(1);
// async function myFn() {
//     console.log(2)
//     const res = await 3 // Promise.resolve(3)
//     console.log(res);
// }

// console.log(5);
// // async修饰的函数是异步的
// // 进入函数内部，执行代码一直到遇到await，就跳出
// // 继续执行这个函数之后的代码
// myFn()
// console.log(6);


// console.log(1);
// console.log(5);
// setTimeout(()=>{ console.log(3)})
// console.log(6);

</script>

11.优化回调地狱函数

<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>

<script>
    // 目标: 使用Promise的链式调用解决问题
// 前提: axios函数在原地返回的就是一个Promise对象
// let pname = ''
// axios.defaults.baseURL = 'http://ajax-api.itheima.net'
// axios.get('/api/province').then(res => {
//     // 2. 获取某个省, 对应的城市列表
//     pname = res.data.data[5];
//     return axios.get(`/api/city?pname=${pname}`)
// }).then(res => {
//     // 3. 获取某个市, 对应的地区列表
//     let cname = res.data.data[0]
//     return axios.get(`/api/area?pname=${pname}&cname=${cname}`)
// }).then(res => {
//     console.log(res);
// })
</script>

<script>
    axios.defaults.baseURL = 'http://ajax-api.itheima.net'

    async function fn(){
        const provinces = await axios.get('/api/province')
        const pname = provinces.data.data[5];
        
        const citys = await axios.get(`/api/city?pname=${pname}`)
        
        let cname = citys.data.data[0]
        const areas = await axios.get(`/api/area?pname=${pname}&cname=${cname}`)
        console.log(areas.data.data)
    }

    fn()
</script>