axios

 一.服务器搭建

 点击跟踪操作

2.安装

npm install json-server

3. 创建db.json文件

  

示例:

{
  "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"
  }
}

4. 启动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-datax-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> 

5. 关于axios的配置，学习阶段直接使用jsDelivr CDN引入安装即可

注意，要在vue3项目中引入axios，是在index.html文件中进行引入，而不是在组件中进行引入。这样它会在整个应用的 HTML 文件中加载。

 

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

 搜索bootcdn.cn

进行选择