自行封装一个简单的ajax,使用promise来封装异步ajax

一个简单的封装ajax函数

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

    // 提供myAxios来实现发送ajax请求   ajax 异步操作  ==>   需要使用promise来封装ajax异步代码
  function myAxios({method='get',url,params,data}){
  return new Promise((resolve,reject)=>{
           
            let xhr=new XMLHttpRequest
            if(params){
              let arr=[]
              for(let k in params){arr.push(`${k}=${params[k]}`)
              }
              console.log(arr.join('&'))
              url+=`?${arr.join('&')}`
            }
         xhr.open(method,url)
         if(method.toLowerCase()==='get'){
          console.log('get请求方式');
          xhr.send()
         }else{
          if(data){
            console.log('有data请求体');
            xhr.setRequestHeader('content-type','application/json')
            xhr.send(JSON.stringify(data))
          }
         }
        
         xhr.addEventListener('load',function(){
          resolve(JSON.parse(xhr.response))
         })
       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: 19
        }
      }).then((res) => {
        console.log(res) 
      }).catch((err)=>{
         alert(err)
       })
    }) 

    // 发送post请求
    document.querySelector('#btnPost').addEventListener('click', function () {
 
      myAxios({
        method: 'post',
        url: 'http://www.liulongbin.top:3009/api/post',
        params: {
          name: 'lw',
          age: 19
        },
        data: {
          a: 1,
          b: 2
        }
      }).then((res) => {
        console.log(res) 
      })
    })
  </script>
<button id="btnGet">发送get请求</button>
  <button id="btnPost">发送post请求</button>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值