当前位置: 首页 > news >正文

【学习笔记】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描述
GETaxios.get(url [,config])获取资源
POSTaxios.post(url [,data [,config]])创建资源
PUTaxios.put(url [,data [,config]])更新资源
DELETEaxios.delete(url [,config])删除资源

相关文章:

【学习笔记】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 读…...

自然资源-关于加强规划实施监督管理的指导意见(浙江省自然资源厅学习借鉴)

自然资源-关于加强规划实施监督管理的指导意见&#xff08;浙江省自然资源厅&#xff08;征求意见稿&#xff09;学习借鉴 以下为征求意见稿的内容&#xff0c;很多干活&#xff1a; 各市、县&#xff08;市、区&#xff09;自然资源主管部门&#xff1a; 为加强国土空间规划…...

408链表的创建和初始化

首先第一个头文件&#xff0c;定义结构体类型 typedef struct LNode {int data;struct LNode* next; }LNode,*LinkList; //可能作为第一次写c语言的小伙伴看不懂这一段typedef是如何定义的 //基本的解释如下所示 //typedef struct LNode LNode; //typedef struct LNode* LinkL…...

Python数据框/列表生成一列多个同样的值

例1&#xff1a;Python生成100个数字2 方法一&#xff1a; import numpy as np a np.random.randint(2,3,100) 方法二&#xff1a; a [2] list a * 100 #100个数字2的列表 例2&#xff1a;生成100个字符串棒 b 棒 list_b b * 100...

使用 MDC 实现日志链路跟踪,包教包会!

在微服务环境中&#xff0c;我们经常使用 Skywalking、Spring Cloud Sleut 等去实现整体请求链路的追踪&#xff0c;但是这个整体运维成本高&#xff0c;架构复杂&#xff0c;本次我们来使用 MDC 通过 Log 来实现一个轻量级的会话事务跟踪功能&#xff0c;需要的朋友可以参考一…...

【成都信息工程大学】只考程序设计!成都信息工程大学计算机考研考情分析!

成都信息工程大学&#xff08;Chengdu University of Information Technology&#xff09;&#xff0c;简称“成信大”&#xff0c;由中国气象局和四川省人民政府共建&#xff0c;入选中国首批“卓越工程师教育培养计划”、“2011计划”、“中西部高校基础能力建设工程”、四川…...

将单列数据帧转换成多列数据帧

文章目录 1. 查看数据文件2. 读取数据文件得到单例数据帧3. 将单列数据帧转换成多列数据帧 在本次实战中&#xff0c;我们的目标是将存储在HDFS上的以逗号分隔的文本文件student.txt转换为结构化的Spark DataFrame。首先&#xff0c;使用spark.read.text读取文件&#xff0c;得…...

信息学奥赛初赛天天练-20-完善程序-vector数组参数引用传递、二分中值与二分边界应用的深度解析

PDF文档公众号回复关键字:20240605 1 2023 CSP-J 完善程序1 完善程序&#xff08;单选题&#xff0c;每小题 3 分&#xff0c;共计 30 分&#xff09; 原有长度为 n1,公差为1等升数列&#xff0c;将数列输到程序的数组时移除了一个元素&#xff0c;导致长度为 n 的开序数组…...

推荐系统学习 一

参考&#xff1a;一文看懂推荐系统&#xff1a;召回08&#xff1a;双塔模型——线上服务需要离线存物品向量、模型更新分为全量更新和增量更新_数据库全量更新和增量更新流程图-CSDN博客 一文看懂推荐系统&#xff1a;概要01&#xff1a;推荐系统的基本概念_王树森 小红书-CSD…...

分库分表详解

文章目录 分库分表概述分库分表详解分库分表的策略分库分表的注意事项常用的分库分表中间件mysql单表达到多少数据量需要分库分表数据库分库分表缺点分表要停服吗&#xff0c;不停服怎么做 分库分表概述 分库分表是数据库架构设计中的一种常见策略&#xff0c;尤其是在面对大规…...

【java前端课堂】04_类的继承

类的继承 在Java中&#xff0c;继承是面向对象编程的四大基本特性之一&#xff0c;它允许我们根据一个已有的类来定义一个新的类&#xff0c;这个新的类继承了原有类的特性&#xff08;属性和方法&#xff09;&#xff0c;并可以添加新的特性或修改原有特性。这样&#xff0c;…...

React nginx配置,一个端口代理多个项目(转发后找不到CSS,JS及图片资源问题解决)

场景&#xff1a; nginx 配置负载均衡&#xff0c;甲方只提供一个端口&#xff0c;一个域名地址 方法&#xff1a; 一个端口一个域名匹配多个应用 方法一&#xff1a; 依靠设备浏览器区分: 使用UserAgent头来识别用户的客户端, CDN监测vary头的信息&#xff0c;如果内容不一致…...

Unity协程详解

什么是协程 协程&#xff0c;即Coroutine&#xff08;协同程序&#xff09;&#xff0c;就是开启一段和主程序异步执行的逻辑处理&#xff0c;什么是异步执行&#xff0c;异步执行是指程序的执行并不是按照从上往下执行。如果我们学过c语言&#xff0c;我们应该知道&#xff0…...

【iOS】UI学习(二)

目录 前言UIViewContorllerUIViewContorller基础UIViewContorller使用 定时器和视图移动UISwitch控件UIProgressView和UISlider总结 前言 本篇博客是笔者在学习UI部分内容时的成果和遇到的一些问题&#xff0c;既是我自己的学习笔记&#xff0c;也希望对你有帮助&#xff5e; …...

React路由(React笔记之五)

本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠)) 喜欢的话点个赞,谢谢! React路由介绍 现在前端的项目一般都是SPA单页面应用,不再是以前多个页面多套HTML代码项目了,应用内的跳转不需要刷新页面就能完成页面跳转靠的就是路由系统 R…...

调用讯飞星火API实现图像生成

目录 1. 作者介绍2. 关于理论方面的知识介绍3. 关于实验过程的介绍&#xff0c;完整实验代码&#xff0c;测试结果3.1 API获取3.2 代码解析与运行结果3.2.1 完整代码3.2.2 运行结果 3.3 界面的编写&#xff08;进阶&#xff09; 4. 问题分析5. 参考链接 1. 作者介绍 刘来顺&am…...

reduce过滤递归符合条件的数据

图片展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head><…...

Go微服务: 基于rocketmq:5.2.0搭建RocketMQ环境,以及示例参考

概述 参考最新官方文档&#xff1a;https://rocketmq.apache.org/zh/docs/quickStart/03quickstartWithDockercompose以及&#xff1a;https://rocketmq.apache.org/zh/docs/deploymentOperations/04Dashboard综合以上两个文档来搭建环境 搭建RocketMQ环境 1 ) 基于 docker-c…...

Wpf 使用 Prism 开发MyToDo应用程序

MyToDo 是使用 WPF &#xff0c;并且塔配Prism 框架进行开发的项目。项目中进行了前后端分离设计&#xff0c;客户端所有的数据均通过API接口获取。适合新手入门学习WPF以及Prism 框架使用。 首页统计以及点击导航到相关模块功能待办事项增删改查功能备忘录增删改查功能登录注册…...

vue-Dialog 自定义title样式

展示结果 vue代码 <el-dialog :title"title" :visible.sync"classifyOpen" width"500px" :showClose"false" class"aboutDialog"> <el-form :model"classifyForm" :rules"classifyRules">…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...