【学习笔记】Axios、Promise

TypeScript

1、Axios
- 1.1、概述
- 1.2、axios 的基本使用
- 1.3、axios 的请求方式及对应的 API
- 1.4、axios 请求的响应结果结构
- 1.5、axios 常用配置选项
- 1.6、axios.create()
- 1.7、拦截器
- 1.8、取消请求
2、Promise
- 2.1、封装 fs 读取文件操作
- 2.2、封装 fs 读取文件操作
- 2.3、util.promisify
- 2.4、resolve、reject函数
- 2.5、Promise.all()
- 2.6、Promise.race()
- 2.7、执行顺序
- 2.8、异常穿透
- 2.9、中断 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",// URLurl: `http://localhost:3000/${table}/${id}`,}).then((response) => {green("获取成功!");console.log(response.data);});
}// POST请求  添加
function post(table, obj) {axios({// 请求类型method: "POST",// URLurl: `http://localhost:3000/${table}`,// 请求体data: obj,}).then((response) => {green("发送成功!");console.log(response.data);});
}// PUT请求  修改
function put(table, id, obj) {axios({// 请求类型method: "PUT",// URLurl: `http://localhost:3000/${table}/${id}`,// 请求体data: obj,}).then((response) => {green("修改成功!");console.log(response.data);});
}// DELETE  删除
function del(table, id) {axios({// 请求类型method: "DELETE",// URLurl: `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])	删除资源