axios

什么是axios

Axios 是专注于网络数据请求的库

相比于原生的 XMLHttpRequest 对象，axios 简单易用

相比于jQuery、axios更加轻量化、只专注于网络数据请求

 

<body>
  <button id="btn1">发起GET请求</button>
  <button id="btn2">发起POST请求</button>
  <button id="btn3">直接使用axios发起GET请求</button>
  <button id="btn4">直接使用axios发起POST请求</button>
</body>

　　

<script>
  document.querySelector('#btn1').addEventListener('click', function () {
    var url = 'http://www.liulongbin.top:3006/api/get'
    var paramsObj = { name: 'zs', age: 20 }
    axios.get(url, { params: paramsObj }).then(function (res) {
      console.log(res.data);
    })
  })

  document.querySelector('#btn2').addEventListener('click', function () {
    var url = 'http://www.liulongbin.top:3006/api/post'
    var dataObj = { address: '北京', location: '顺义区' }
    axios.post(url, dataObj).then(function (res) {
      console.log(res.data);
    })
  })

  document.querySelector('#btn3').addEventListener('click', function () {
    var url = 'http://www.liulongbin.top:3006/api/get'
    var paramsData = { name: '钢铁侠', age: 35 }
    axios({
      method: 'GET',
      url: url,
      params: paramsData
    }).then(function (res) {
      console.log(res.data);
    })
  })
  document.querySelector('#btn4').addEventListener('click', function () {
    axios({
      method: 'POST',
      url: 'http://www.liulongbin.top:3006/api/post',
      data: {
        name: '娃哈哈',
        age: 18,
        gender: '女'
      }
    }).then(function (res) {
      console.log(res.data);
    })
  })
</script>

 

posted @ 2022-05-04 11:09  奥摩前端  阅读(143)  评论(0)  编辑  收藏  举报