10.24 Ajax day05 封装原生Ajax&async await

1.封装过程

               创建函数 设置参数

                return Promise对象（四个参数）

                输出Promise 四参数

                创建xhr对象   

                    调用xhr.open()

                     调用xhr.send([请求体数据])  判断get 

                      监听load事件

 //  GET   http://www.liulongbin.top:3009/api/get
    //  POST  http://www.liulongbin.top:3009/api/post

    // 发送get请求
    function myaxios({method='get',url,params,data}){
        return new Promise((resolve,reject)=>{
         console.log(method,url,params,data) 
        //  发送请求，创建xhr
          let xhr=new XMLHttpRequest()
             
          // 把查询参数写到地址中
            if(params){
              let arr=[]
              for (let k in params){
                arr.push(`${k}=${params[k]}`)
                
                // let str=arr.join('&')
                // xhr.open(method,`${url}?${str}`)
              }
              url+=`?${arr.join('&')}`
            }
              xhr.open(method,url)
            
           
            // xhr.setRequestHeader(content-Type,)
            if(method.toLowerCase==="get"){
              xhr.send()
            }else{
              xhr.setRequestHeader('content-Type','application/json')
              xhr.send(JSON.stringify(data))
              // xhr.send(data)
            }
            
            xhr.addEventListener('load',function(){
              resolve(JSON.parse(xhr.response))//改成成功状态，执行then
            })
            // 监听error 处理请求失败
            xhr.addEventListener('error',function(){
              reject("网络异常，请求失败")
            })
        })
      }

   // 发送get请求
   document.querySelector('#btnGet').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myaxios({
        method:'get',
        url:'http://www.liulongbin.top:3009/api/get',
        params:{
          name:'lw',
          age:10
        }
      }).then((res)=>{
        console.log(res)})
    })

    // 发送post请求
    document.querySelector('#btnPost').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myaxios({
        method:'post',
        url:'http://www.liulongbin.top:3009/api/post',
        params:{
          name:'lw',
          age:10
        },
        data:{
          name:'niuma'
        }
      }).then((res)=>{
        console.log(res)})
        .catch((err)=>{alert(err)})

    })

        二

1.async&await

        用于修饰函数是异步的

        如果async没有await，那么async没有意义，全是同步的内容

        只有遇到了await开始往下，才是异步的开始

  async   function fn() {
            let num = await 1
            console.log(num)
        }
        fn()
        console.log(2)

        //2 1

        await后面一般跟promise对象

 let {data:res}=await axios.get('http://www.liulongbin.top:3006/api/getbooks')
            console.log(res)

  async function fn(){
            try{
            let {data:res}=await axios.get('http://www.liulongbin.top:3006/api/getbooks')
            console.log(res)
            }catch(e){
                console.log(e)
                alert('获取失败，请稍后重试')
            }
        
        }
        fn()

        使用async和await解决回调地狱的问题

 // 使用async await 解决回调地狱问题
        function fn(color, time) {
            // color 就是成功的结果
            // time  延时时间

            // 记得将创建的promise实例对象给返回出去
            return new Promise((resolve, reject) => {
                setTimeout(function () {
                    resolve(color) // 状态 fulfilled 成功
                }, time)
            })
        }
        async function demo(){
                let color1=await fn('red',2000)
                console.log(color1)
                let color2=await fn('yellow',1000)
                console.log(color2)
                let color3=await fn('green',3000)
                console.log(color3)
            }
            demo()