上一章使用Vite 快速建立了Vue 3項目。本文将介紹使用 axios 發送網絡請求。
Axios 是什麼?
Axios 是一個基于 promise 網絡請求庫，作用于node.js 和浏覽器中。 它是 isomorphic（同構） 的，也就是同一套代碼可以運作在浏覽器和node.js中。在服務端它使用原生 node.js http 子產品, 而在用戶端 (浏覽端) 則使用 XMLHttpRequests。
一、安裝 axios
參考如下指令：
npm install moduleName --save
簡寫 -s，将子產品安裝到項目 node_modules 目錄下，也會将子產品依賴寫入 dependencies 節點，同時運作 npm install 初始化項目時會将子產品下載下傳到項目目錄下。
在vs code 中，打開終端，敲入下面的安裝指令：
npm install axios --save
安裝完成之後，打開 package.json 檔案，在dependencies 中可以看到加入的網絡請求庫：axios。
dependencies 類似于android 的Gradle ，添加依賴庫，所有的依賴庫均會在這裡。
二、使用axios入門
找到一個需要加入網絡請求的頁面，比如 App.vue。
App.vue 檔案是一個單檔案元件，包含了元件代碼、模闆代碼和CSS樣式規則。還引入了HelloWord元件，然後在template中使用它。
如下是更新後的App.vue 檔案，示例代碼如下所示：
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
const handleClick=()=>{
axios
.get("http://localhost:3000/posts")
.then(function (response) {
console.log(response.data);
console.log("-----")
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
})
.catch(function (error) {
console.log(error);
})
}
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<div>
<button v-on:click="handleClick">擷取資料</button>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style> 首先，在template部分，添加一個按鈕以及對應click 事件。
接着，導入axios：
import axios from 'axios'
最後，編寫點選事件的handleClick方法，使用axios 發起GET 請求。其中，axios 請求的URL：http://localhost:3000/posts 是通過json-server 快速搭建的。
json-server 是一個 node.js 子產品，運作 Express 伺服器，你可以指定一個 json 檔案作為 API 的資料源。
簡單的說，它可以模拟小型背景API 接口，在一個JSON檔案中操作資料。
指令：json-server --watch db.json
json-server 預設是開啟 CORS（跨域請求）支援。可以通過--nc 參數進行調整：
--no-cors, --nc Disable Cross-Origin Resource Sharing
指令：json-server --nc true --watch db.json
關于json-server 的使用，可以檢視連結：https://www.npmjs.com/package/json-server
三、測試驗證
成功啟動項目之後，通過浏覽器通路URL，會顯示【擷取資料】的按鈕。
浏覽器控制台輸出結果，如圖所示：