【学习笔记】Axios、Promise

1、Axios

      1.1、概述

        axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它可以发送异步的 HTTP 请求，支持许多常见的功能，如请求和响应的拦截、请求取消、自动转换 JSON 数据等。axios 的设计简单易用，可以轻松地与现代的前端框架（如 React、Vue.js）集成，并且在 Node.js 环境中也能发挥作用。axios 是由 Promise API 提供支持，因此可以通过使用 async/await 等方式处理异步操作，使得代码更加清晰易读

安装：npm i axios

      1.2、axios 的基本使用

        首先搭建一个服务器，这里使用 json-server 提供的模拟服务器

安装：npm i -g json-server

// db.json 模拟数据库内容
{
   
  "posts": [
    {
   
      "id": 1,
      "title": "posts_aaa",
      "author": "Niki"
    },
    {
   
      "id": 2,
      "title": "posts_bbb",
      "author": "Tom"
    }
  ],
  "comments": [
    {
   
      "id": 1,
      "body": "comment_ccc",
      "postId": 1
    },
    {
   
      "id": 2,
      "body": "comment_ddd",
      "postId": 2,
    }
  ],
  "profile": {
   
    "name": "profile_eee"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

开启服务器：json-server --watch .\db.json

const axios = require("axios");

// 输出样式
function green(str) {
   
  console.log(`\x1b[32m${
     str}\x1b[0m`);
}
function red(str) {
   
  console.log(`\x1b[31m${
     str}\x1b[0m`);
}

// GET请求  获取
function get(table, id) {
   
  axios({
   
    // 请求类型
    method: "GET",
    // URL
    url: `http://localhost:3000/${
     table}/${
     id}`,
  }).then((response) => {
   
    green("获取成功!");
    console.log(response.data);
  });
}

// POST请求  添加
function post(table, obj) {
   
  axios({
   
    // 请求类型
    method: "POST",
    // URL
    url: `http://localhost:3000/${
     table}`,
    // 请求体
    data: obj,
  }).then((response) => {
   
    green("发送成功!");
    console.log(response.data);
  });
}

// PUT请求  修改
function put(table, id, obj) {
   
  axios({
   
    // 请求类型
    method: "PUT",
    // URL
    url: `http://localhost:3000/${
     table}/${
     id}`,
    // 请求体
    data: obj,
  }).then((response) => {
   
    green("修改成功!");
    console.log(response.data);
  });
}

// DELETE  删除
function del(table, id) {
   
  axios({
   
    // 请求类型
    method: "DELETE",
    // URL
    url: `http://localhost:3000/${
     table}/${
     id}`,
  }).then((response) => {
   
    green("删除成功!");
    console.log(response.data);
  });
}

// 测试
// get("posts", 2);
// post("posts", {title: "posts_ccc", author: "John"});
// put("posts", 3, {title: "posts_ccc", author: "Siri"});
// del("posts", 3);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

      1.3、axios 的请求方式及对应的 API

        上面的例子中，axios() 其实是 axios.request() 的简写形式，在使用 axios.request() 时，需要配置 method 来指明请求类型，对此 axios 提供了请求方法对应的 API，例如对于 GET 请求，可以使用 axios.get() 这个 API 来发送请求，使得看起来更加明了，以下是 Axios 支持的请求方法和对应的 API

<