axios - 技术栈

一.服务器搭建

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 文件中加载。

该网址资源有时访问较慢，可换为国内资源

搜索bootcdn.cn

进行选择