一.服务器搭建
2.安装
npm install json-server
- 创建db.json文件
示例:
javascript
{
"posts": [
{ "id": "1", "title": "a title", "views": 100 },
{ "id": "2", "title": "another title", "views": 200 }
],
"comments": [
{ "id": "1", "text": "a comment about post 1", "postId": "1" },
{ "id": "2", "text": "another comment about post 1", "postId": "1" }
],
"profile": {
"name": "typicode"
}
}- 启动JSON Server 并指定db.json作为数据库文件
要求安装json-server 和 db.json在同一个文件夹里
$ npx json-server db.json
地址栏打开
二.认识axios
1.含义：用于浏览器和 node.js 的基于 Promise 的 HTTP 客户端
在浏览器端，可以借助axios向服务器端发送AJAX请求来获取数据
在node.js端，可以借助axios向服务器端发送HTTP请求来获取数据
2.特点
- 从浏览器发出 XMLHttpRequests
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- JSON 数据的自动转换
- 🆕 自动数据对象序列化和正文编码
multipart/form-data``x-www-form-urlencoded- 用于防止 XSRF 的客户端支持
3.浏览器支持
4.安装
项目中使用包管理工具进行安装
npm install axios
yarn add axios
bower install axios
安装包后，可以使用or方法导入库:import require
import axios, {isCancel, AxiosError} from 'axios';
也可以使用默认导出，因为命名导出只是从 Axios 工厂重新导出：
import axios from 'axios';
console.log(axios.isCancel('something'));
如果使用 for 导入，则只有默认导出可用 ：require
const axios = require('axios');
console.log(axios.isCancel('something'));
如果在尝试将模块导入自定义或旧环境时出错， 可以尝试直接导入 Module 包：
const axios = require('axios/dist/browser/axios.cjs'); // browser commonJS bundle (ES2017)
// const axios = require('axios/dist/node/axios.cjs'); // node commonJS bundle (ES2017)
CDN安装：
使用 jsDelivr CDN（ES5 UMD 浏览器模块）安装：
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
使用 unpkg CDN安装：
<script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
- 关于axios的配置，学习阶段直接使用jsDelivr CDN引入安装即可
注意，要在vue3项目中引入axios，是在index.html文件中进行引入，而不是在组件中进行引入。这样它会在整个应用的 HTML 文件中加载。
该网址资源有时访问较慢，可换为国内资源
进行选择
