浅学一下axios - 技术栈

1. 简介

axios是一个基于Promise ，作用于nodejs和浏览器中的网络请求库。

具有以下特性：

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
超时处理
查询参数序列化支持嵌套项处理
自动将请求体序列化为： JSON (application/json) Multipart / FormData (multipart/form-data) URL encoded form (application/x-www-form-urlencoded)
将 HTML Form 转换成 JSON 进行请求
自动转换JSON数据
获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
为 node.js 设置带宽限制
兼容符合规范的 FormData 和 Blob（包括 node.js）
客户端支持防御XSRF

2. json server

2.1简介

json-server是一款json数据服务器，它运行 Express 服务器，可以对json文件、js脚本生成的json数据、远程json数据进行restful风格的增删改查操作，通过 指定一个json文件作为api数据源 ，可以进行分页、排序、关联查询、范围查询等各种查询操作，是一套完整的模拟 REST API 接口

使用json-server需要注意：

查询数据使用 GET

新增数据使用 POST

删除数据使用 DELETE

修改数据使用 PUT 和 PATCH

2.2 安装

npm install -g json-server

2.3 db.json

在项目目录创建一个db.json文件

json 复制代码

{
  "users": [
    {
      "id":1,
      "name": "codeyu",
      "age": 20,
      "addr": "江苏南京"
    },
    {
      "id":2,
      "name": "xiaoming",
      "age": 22,
      "addr": "江苏苏州"
    }
  ]
}

2.4 启动服务

进入项目目录，打开终端输入 json-server --watch db.json

3. axios快速上手

3.1 在html中使用

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <script>
    axios.get("http://localhost:3000/users").then(res => {
      console.log(res.data);
    })
  </script>
</body>
</html>

3.2 在vue3项目中使用

准备一个vue3项目：

npm create vue@latest

安装axios：

npm install axios

xml 复制代码

<template>
  <div>
    <h1>welcome to axios</h1>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';

axios.get('http://localhost:3000/users').then(res => {
  console.log(res.data);
})
</script>