入门魔法 - 透过 axios 发送网路请求
前情提要
上回提到了要透过 AJAX 远距离魔法呼叫精灵并等待精灵回覆。
艾草：「来，我们先来试试看 AJAX 的其中一段咒语 ：XMLHttpRequests ！」
「太长了啦！我不能每次都念这麽长吧！」
艾草：「阿不然另一句咒语：Fetch ！」
「Fetch～～」
(几分钟後．．．)
「为什麽没反应呀？？」
艾草：「喔喔，你隔壁那几只精灵说他们不支援这个咒语，帮哭哭。」
(艾草感觉自身要被一股愤怒的视线射穿了．．．)
艾草：「啊，别急，我又想到了。我平常也很常用的外挂级别好用咒语，来跟着我一起来了解如何透过 axios 发送 AJAX 远距离魔法吧！ 」
(艾草心里 os 原来帮哭哭有嘲讽效果，下次改帮拍拍好了)
axios
axios 是能更简单容易处理 AJAX 的套件，axios 套件其实也是透过 AJAX 原生方法 XMLHttpRequests 去发送网路请求，因此浏览器支援度高，且 axios 套件相较 XMLHttpRequests 在发送网路请求的程序码上也简单许多。
axios 套件支援多种引入方式，这次来介绍 CDN 的引入方式吧！
可以透过官方文件找到 CDN 引入网址。
首先，我们先在 HTML 上载入 axios 的 CDN :
<!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>
</head>
<body>
<!-- 将 axios 套件 CDN 放置於个人 JavaScript 档案上方 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
</script>
<script src="all.js"></script>
</body>
</html>
这样就完成罗，接下来简单实作透过 axios 发送网路请求！
get 网路请求
想要获取远端 API 资料时，可以发送 get 网路请求，记得透过字串形式的方式带入想获取资料的 API 网址，发送请求後会依据是否成功回传到相对应的 .then、.catch 函式的参数上，并执行大括号 {} 的内容。
axios.get("想获取资料的 API 网址")
.then(function (response) {
//成功
console.log(response);
})
.catch(function (error) {
//错误
console.log(error);
})
成功回传：
成功回传会接收到一大包物件，底下有一堆属性，来介绍几个常用的吧！
- data：捞回来的资料都会放在这里
- status：HTTP 状态码
- statusText：HTTP 状态码的讯息
错误回传：
看到错误讯息时不用太紧张，可以先观察状态码，目前状态码为 404 ，在发送 get 网路请求时，会出现 404 的状况通常是网址对应不到，再确认一下网址是不是有贴错就好罗！
post 网路请求
首先 post 网路请求第一个参数要透过字串的方式填入对应的网址，要不要带入其他参数可以透过观看 API 文件。
目前练习用的 API 网址是六角学院提供的 API 网址，主要拿来练习帐号注册功能，可以看到文件上规范如下：
代表夹带的物件内需要包含 email 属性、password 属性，要特别留意名称是否有输入错误唷！
axios.post("https://hexschool-tutorial.herokuapp.com/api/signup", {
email: '[email protected]',
password: '12345678'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
看到成功回传讯息後，会发现资料已经被丢过去罗！
delete 网路请求
要练习删除功能前，我先透过 post 网路请求，送出一笔待删除的资料。
axios.post("想传送资料过去的 API 网址", {
id: Date.now(),
todoContent: "我是代办事项一",
completed: false
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
首先，让我们观察一下目前此笔资料：
API 文件上记载须将想删除的 id 带进网址斜线 / 後方，透过使用 delete 发送网路请求，并在网址後方带入希望删除的 id ，就能成功删除资料罗！
axios.delete("模拟的 API 网址/1630465076912")
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
总结
-
axios是透过XMLHttpRequests去发送网路请求 -
axios成功回传物件内常用属性：- data：捞回来的资料都会放在这里
- status：HTTP 状态码
- statusText：HTTP 状态码的讯息
- 可透过
get网路请求取得远端 API 资料 - 发送
post网路请求时，要观看 API 文件确认用途与夹带资料 - 可透过
delete网路请求删除远端 API 资料
小练习
请问以下叙述何者错误？
A 透过 axios 套件发送网路请求时，也是透过 AJAX 原生方法 XMLHttpRequests 发送
B 如果到政府资料开放平台想捞取某笔 JSON 资料时，可以透过 axios 发送 get 网路请求
C 使用 post 网路请求时，第二个参数一定要夹带物件，不然网路请求会发送失败
D delete 网路请求通常拿来删除远端 API 资料
解答：选项 C ，使用 post 网路请求时，是否要夹带第二个参数及用途，要观看 API 文件为准，也有可能都不用夹带物件。
参考文献
JavaScript 必修篇 - 前端修练全攻略(六角学院)
https://github.com/axios/axios#features
<<: 第 16 集：Bootstrap 客制化 Sass 架构实战范例
D19 - 用 Swift 和公开资讯，打造投资理财的 Apps { 移动平均线(MA线)实作.2 }
MAUtility 既然已经完成，那就可以在 ChartsAdapter 中处理 [StockKLi...
30天程序语言研究
今天是30天程序语言研究的第六天，研究的语言一样是python,今天主要学习的是建立一个计算机和字典...
Day 2 Docker 基本概念
在正式使用 docker 之前，需要先知道以下三个元素：映像档 ( Image )、容器 ( Con...
[Day22]Week3总结
在week3里，我们花了两天在学习merkle tree(传送门)，看懂了图上的运作流程，也尝试自...
Day#07 新增(2)
前言 接续着前一天没做完的新增功能，今天继续接着做～边做也一边介绍用到的方法与程序码。 Storyb...