# axios
###### tags: `AJAX`
## 1. axios的理解與使用
### 什麼是axios
* 前端最流行的ajax請求庫
* react/vue官方都推薦使用axios發ajax請求
* 文件：https://github.com/axios/axios
### axios特點
1. 基於xhr + promise的異步ajax請求庫
2. 瀏覽器端/node端都可以使用
3. 支援請求／響應攔截器
4. 支援請求取消
5. 請求/回應數據轉換
6. 批量發送多個請求
### axios基本使用
```htmlembedded=
<!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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">基本使用</h2>
<button class="btn btn-primary"> 发送GET请求 </button>
<button class="btn btn-warning" > 发送POST请求 </button>
<button class="btn btn-success"> 发送 PUT 请求 </button>
<button class="btn btn-danger"> 发送 DELETE 请求 </button>
</div>
<script>
//獲取按鈕
const btns = document.querySelectorAll('button')
//第一個
btns[0].onclick = function(){
//發送AJAX請求
axios({
//請求類型
method: 'GET',
url: 'http://localhost:3000/posts/2'
}).then(response => {
console.log(response)
})
}
//添加一篇新的文章
btns[1].onclick = function(){
//發送AJAX請求
axios({
//請求類型
method: 'POST',
//URL
url: 'http://localhost:3000/posts',
//請求體
data: {
title: '今天好熱',
author: '馬凱'
}
}).then(response => {
console.log(response)
})
}
//更新數據
btns[2].onclick = function(){
//發送AJAX請求
axios({
//請求類型
method: 'PUT',
//URL
url: 'http://localhost:3000/posts/3',
//請求體
data: {
title: '今天好熱',
author: '李四'
}
}).then(response => {
console.log(response)
})
}
//刪除數據
btns[3].onclick = function(){
//發送AJAX請求
axios({
//請求類型
method: 'delete',
//URL
url: 'http://localhost:3000/posts/3',
}).then(response => {
console.log(response)
})
}
</script>
</body>
</html>
```
### axios其他使用
```htmlembedded=
<!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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">基本使用</h2>
<button class="btn btn-primary"> 发送GET请求 </button>
<button class="btn btn-warning" > 发送POST请求 </button>
<button class="btn btn-success"> 发送 PUT 请求 </button>
<button class="btn btn-danger"> 发送 DELETE 请求 </button>
</div>
<script>
//獲取按鈕
const btns = document.querySelectorAll('button')
//發送GET請求
btns[0].onclick = function(){
//axios()
axios.request({
method: 'GET',
url: 'http://localhost:3000/comments'
}).then(response => {
console.log(response)
})
}
//發送POST請求
btns[1].onclick = function(){
//axios()
axios.post('http://localhost:3000/comments',
{
"body": "fewfwefwe",
"postId": 2
}).then(response => {
console.log(response);
})
}
</script>
</body>
</html>
```
### axios設定預設配置
```html=
<!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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">基本使用</h2>
<button class="btn btn-primary"> 发送GET请求 </button>
<button class="btn btn-warning" > 发送POST请求 </button>
<button class="btn btn-success"> 发送 PUT 请求 </button>
<button class="btn btn-danger"> 发送 DELETE 请求 </button>
</div>
<script>
//獲取按鈕
const btns = document.querySelectorAll('button')
//預設設定
axios.defaults.method = 'GET'
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.params = {id:100}
btns[0].onclick = function(){
axios({
url: '/posts'
}).then(response => {
console.log(response)
})
}
</script>
</body>
</html>
```
### axious建立實體物件發送請求
```htmlembedded
<!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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">基本使用</h2>
<button class="btn btn-primary"> 发送GET请求 </button>
<button class="btn btn-warning" > 发送POST请求 </button>
<button class="btn btn-success"> 发送 PUT 请求 </button>
<button class="btn btn-danger"> 发送 DELETE 请求 </button>
</div>
<script>
//獲取按鈕
const btns = document.querySelectorAll('button')
//創建實體物件
const word = axios.create({
baseURL: 'https://api.apiopen.top',
timeout: 2000
})
//這裡word與axios物件的功能幾乎是一樣的
word({
url: '/getJoke',
}).then(response => {
console.log(response)
})
word.get('/getJoke').then(response => {
console.log(response.data)
})
</script>
</body>
</html>
```
### axious攔截器
```htmlembedded=
<!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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
// Promise
// 設定請求攔截器
axios.interceptors.request.use(function (config) {
console.log('請求攔截器 成功 -1')
return config;
}, function (error) {
console.log('請求攔截器 失敗 -1')
return Promise.reject(error);
});
axios.interceptors.request.use(function (config) {
console.log('請求攔截器 成功 -2')
return config;
}, function (error) {
console.log('請求攔截器 失敗 -2')
return Promise.reject(error);
});
// 設定回應攔截器
axios.interceptors.response.use(function (response) {
console.log('回應攔截器 成功 -1')
return response;
}, function (error) {
console.log('回應攔截器 失敗 -1')
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
console.log('回應攔截器 成功 -2')
return response;
}, function (error) {
console.log('回應攔截器 失敗 -2')
return Promise.reject(error);
});
//發送請求
axios({
method: 'GET',
url: 'http://localhost:3000/posts'
}).then(response => {
console.log("自訂義回調處理成功的結果")
}).catch(reason => {
console.log('自訂義回調失敗')
})
</script>
</body>
</html>
```
### axios取消請求
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">axios取消請求</h2>
<button class="btn btn-primary"> 發送請求 </button>
<button class="btn btn-warning" > 取消請求 </button>
</div>
<script>
//獲取按鈕
const btns = document.querySelectorAll('button')
//2.聲明一個全域變數
let cancel = null;
//發送請求
btns[0].onclick = function(){
//檢測上一次的請求是否已經完成
if(cancel !== null){
//取消上一次的請求
cancel()
}
axios({
method: 'GET',
url: 'http://localhost:3000/posts',
//1.添加配置物件的屬性
cancelToken: new axios.CancelToken(function(c){
//3.將c的值賦值給cancel
cancel = c;
})
}).then(response =>{
console.log(response)
//將cancel值初始化
cancel = null
})
}
//綁定第二個事件取消請求
btns[1].onclick = function(){
cancel();
}
</script>
</body>
</html>
```
Sign in with Wallet
Connect another wallet