上一章使用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，会显示【获取数据】的按钮。
浏览器控制台输出结果，如图所示：