网络数据请求库 axios

1. 什么是 axios  (axios.js文件地址 : https://unpkg.com/axios@0.27.2/dist/axios.min.js)

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

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

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

2. axios 发起 GET 请求

axios 发起 get请求的语法 :

 

 具体请求示例如下 :

 

源码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/axios.js"></script>
</head>
<body>
  <button id="btn1">发起GET请求</button>
  <script>
    document.querySelector('#btn1').addEventListener('click', function () {
      axios.get('http://www.liulongbin.top:3006/api/get', {name: 'zs', age: 20}).then(function (res) {
        console.log(res);
      })
    })
  </script>
</body>
</html>

3. axios 发起 POST 请求

axios 发起 post 请求的语法 :

 

 具体的请求示例如下 :

 

 源码示例 : 

<script src="js/axios.js"></script>
<body>
  <button id="btn1">发起GET请求</button>
  <button id="btn2">发起POST请求</button>
  <script>
    document.querySelector('#btn1').addEventListener('click', function () {
      axios.get('http://www.liulongbin.top:3006/api/get', {name: 'zs', age: 20}).then(function (res) {
        console.log(res);
      })
    })
    document.querySelector('#btn2').addEventListener('click', function () {
      axios.post('http://www.liulongbin.top:3006/api/post', {address: '北京', location: '顺义区'}).then(function (res) {
        console.log(res);
      })
    })
  </script>
</body>

4. 直接使用 axios 发起请求

axios 也提供了类似于 jQuery 中 $.ajax() 的函数, 语法如下 :

 

 1. 直接使用 axios 发起 GET 请求

 

 2. 直接使用 axios 发起 POST 请求

 

posted @ 2022-05-03 09:49  会前端的洋  阅读(126)  评论(0)  编辑  收藏  举报