【学习笔记】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"
  }
}

开启服务器：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.3、axios 的请求方式及对应的 API

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

请求方式	对应的 API	描述
GET	axios.get(url [,config])	获取资源
POST	axios.post(url [,data [,config]])	创建资源
PUT	axios.put(url [,data [,config]])	更新资源
DELETE	axios.delete(url [,config])	删除资源
PATCH	axios.patch(url [,data [,config]])	部分更新资源
HEAD	axios.head(url [,config])	类似于 GET 请求，但不返回响应主体，用于获取报头信息
OPTIONS	axios.options(url [,config])	获取服务器支持的 HTTP 方法

Tip：axios.request() 传入的是一个对象，而上面参数中的 url 是一个字符串，data、config 才是一个对象

const axios = require("axios");

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