axios的基本使用

忘是亡心i 2024-04-01 18:44 91阅读 0赞

#### axios的基本使用 ####

*  Axios是什么？

--------------------

## Axios是什么？ ##

> Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。也正是Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。  
> ![在这里插入图片描述][85d21b6a7288487eb4e32105e99a9601.png]

> ☀️

--------------------

![在这里插入图片描述][d600146a029c41fda3dd2914b51abcb7.png]

> ☀️

--------------------

![在这里插入图片描述][b75f58b3132a4ceeaeacc0dca295fd7e.png]

> ☀️

--------------------

![在这里插入图片描述][bb664ead50d94951991888da16be4ae2.png]

> ☀️

--------------------

![在这里插入图片描述][ebdd6b3645ee46758c0a7ad96e4471b5.png]

> ☀️

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/axios.js"></script>
    </head>
    
    <body>
      <button id="btn1">发起GET请求</button>
      <button id="btn2">发起POST请求</button>
      <button id="btn3">直接使用axios发起GET请求</button>
      <button id="btn4">直接使用axios发起POST请求</button>
    
      <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>
    </body>
    
    </html>

[85d21b6a7288487eb4e32105e99a9601.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b2e3492cd3de44728e13e7e82f6fca16.png
[d600146a029c41fda3dd2914b51abcb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e04037b6090440b79729eb9a0dc7ed02.png
[b75f58b3132a4ceeaeacc0dca295fd7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4b6e1c8c2d484d8091ce10dc24006802.png
[bb664ead50d94951991888da16be4ae2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/291d7862e1d14e3597b9d8dcd20cf55a.png
[ebdd6b3645ee46758c0a7ad96e4471b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e040af833e4e46b1b31388b7cf90d60b.png