【学习笔记】Axios、Promise

ops/2024/9/22 13:46:54/

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

axios__5">      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);

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

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

<
请求方式对应的 API描述
GETaxios.get(url [,config])获取资源
POSTaxios.post(url [,data [,config]])创建资源
PUTaxios.put(url [,data [,config]])更新资源
DELETEaxios.delete(url [,config])删除资源

http://www.ppmy.cn/ops/47230.html

相关文章

PHP身份证真假API在线文档、身份证ocr识别、身份证三要素人像核验

翔云PHP身份证真假API文档&#xff0c;为开发者提供了一个详尽的操作指南和接口说明。通过简洁明了的文档&#xff0c;开发者可以轻松集成身份证验证功能到各类网站或应用程序中&#xff0c;无需从零开始编写复杂的验证逻辑&#xff0c;大大缩短了开发周期&#xff0c;降低了技…

C语言经典例题-18

1.判断是不是字母 题目描述: KK想判断输入的字符是不是字母&#xff0c;请帮他编程实现。 输入描述: 多组输入&#xff0c;每一行输入一个字符。 输出描述: 针对每组输入&#xff0c;输出单独占一行&#xff0c;判断输入字符是否为字母&#xff0c;输出内容详见输出样例。 输…

【光谱特征选择】连续投影算法SPA(含python代码)

目录 一、背景 二、代码实现 三、项目代码 一、背景 连续投影算法&#xff08;Successive Projection Algorithm&#xff0c;SPA&#xff09;是一种用于光谱分离的简单且有效的算法。它主要应用于高光谱图像处理&#xff0c;用于提取混合光谱数据中的端元&#xff08;endme…

【数据结构】穿梭在二叉树的时间隧道:顺序存储的实现

专栏引入 哈喽大家好&#xff0c;我是野生的编程萌新&#xff0c;首先感谢大家的观看。数据结构的学习者大多有这样的想法&#xff1a;数据结构很重要&#xff0c;一定要学好&#xff0c;但数据结构比较抽象&#xff0c;有些算法理解起来很困难&#xff0c;学的很累。我想让大家…

iOS Hittest 机制和实际应用之一 hittest方法

Hittest 机制原理 hitTest的原理就是&#xff0c;当我们点击的时候&#xff0c;会触发 window的 hittest方法&#xff0c;在该方法中会首先使用point inside方法判断 点击的地方是否在window范围内&#xff0c;如果在的话&#xff0c;就倒序遍历姿子视图&#xff0c;然后将poi…

内网安全:横向传递攻击(PTH || PTK || PTT 哈希票据传递)

内网安全&#xff1a;横向传递攻击. 横向移动就是在拿下对方一台主机后&#xff0c;以拿下的那台主机作为跳板&#xff0c;对内网的其他主机再进行后面渗透&#xff0c;利用既有的资源尝试获取更多的凭据、更高的权限&#xff0c;一步一步拿下更多的主机&#xff0c;进而达到控…

Java常规题技术分享

一、数组排序和添加成员 设计类Student和类StudentClass。 (1) 类Student有字符串属性name、double属性grade和int属性age 有带参数的构造方法&#xff0c;可设置三个属性的值 有各个属性的置取方法 (2)类StudentClass有Student数组属性stus存放班级成员&#xff0c;有int…

【HarmonyOS】应用振动效果实现

一、问题背景&#xff1a; 应用在强提醒场景下&#xff0c;一般会有马达振动的效果&#xff0c;提示用户注意力的关注。 比如消息提醒&#xff0c;扫码提示&#xff0c;删除键确认提示等。 针对高定制化或者固定的振动方式&#xff0c;我们需要有不同的方案实现&#xff0c;马…