目錄
上一節我們介紹了本章要學習的內容，對於接下來要介紹的知識點應該有了基本的概念，這一節我們將介紹axios的基本使用、介紹它是如何來發送請求以及獲取響應的內容。
一、axios語法介紹
作爲一個JS庫，爲了使用它，首先我們需要導包，這裏提供官網給的在線地址，在保證聯網的狀態下，把這段代碼拷貝在頁面上就可以使用了。在導入axios包之後，會在頁面上註冊一個全局的axios對象，通過它就可以來發送請求了。
這裏以兩種常見的請求方法爲例，來演示如何使用。
axios-get請求
首先是get請求，地址就是文檔提供的接口地址，然後點then方法，它內部傳遞的第一個回調函數會在請求響應完成之後觸發，第二個函數會在請求失敗的時候觸發。他們的形參可以用來獲取信息，一個是服務器響應的內容，一個是錯誤的信息。
如果需要傳遞參數在url的後面跟上查詢字符串就可以啦，中間使用問號的方式進行分割，查詢字符串的格式是key=value&key2=value2，當然這裏可以一路寫下去，至於到底要寫幾個以及裏面具體的值，其中key是文檔提供的，value是我們要具體傳輸的數據。
axios-post請求
然後是post請求，大體的寫法和get請求基本一致，不同之處在於數據是以對象的形式，寫在我們post方法的第二個參數內部，格式就是一個對象 key:value,key2:value2 的寫法，其中key由接口文檔提供，value是具體要傳輸的數據。
關於網絡請求庫還不夠，我們還需要網絡訪問的接口，所以這裏提供了兩個預先準備好的接口，但是注意前提是你要保證聯網狀態，一個是通過get請求獲取笑話的接口，一個是通過post請求註冊用戶的接口，基礎語法和可以演示的接口已經介紹完畢了。
二、代碼驗證測試
1、axios基本使用_get_post請求
（1）實例代碼
<!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>01_axios基本使用_get_post請求</title>
</head>
<body>
<input type="button" value="get請求" class="get">
<input type="button" value="post請求" class="post">
<!-- 這裏是演示axios的使用，所以並沒有導入Vue包 -->
<!-- 官網提供的 axios 在線地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:隨機笑話
請求地址:https://autumnfish.cn/api/joke/list
請求方法:get
請求參數:num(笑話條數,數字)
響應內容:隨機笑話
*/
//找到類名爲get的請求按鈕，爲它綁定一個點擊事件
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=3")
// axios.get("https://autumnfish.cn/api/joke/list123?num=3")//演示報錯執行方法2
.then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
})
}
/*
接口2:用戶註冊
請求地址:https://autumnfish.cn/api/user/reg
請求方法:post
請求參數:username(用戶名,字符串)
響應內容:註冊成功或失敗
*/
//找到類名爲post的請求按鈕，爲它綁定一個點擊事件
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",
//axios.post("https://autumnfish.cn/api/user/reg123",//演示報錯執行方法2
// { username: "鹽焗西蘭花" })
{ username: "菠菜" })
.then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
})
}
// axios的功能不僅僅只有這些，詳細可查看官網：https://github.com/axios/axios
// 後面我們也會補充一些高級功能
</script>
</body>
</html>
（2）效果展示
1>get請求三條數據，成功
2>get請求，使用錯誤地址：https://autumnfish.cn/api/joke/list123?num=3，報錯如下：
Error: Request failed with status code 404
3>post請求，已被註冊提示
4>post請求，使用錯誤地址：https://autumnfish.cn/api/user/reg123，報錯如下：
Error: Request failed with status code 404
5>post請求，註冊成功提示
三、內容-總結
axios的功能不僅僅只有這些，詳細可查看官網：https://github.com/axios/axios
後面我們也會補充一些高級功能