Axios(一) +Promise自定义封装36-42

news2025/7/8 14:37:01

1. axios 是什么?

1. 前端最流行的 ajax 请求库
2. react/vue 官方都推荐使用 axios ajax 请求
3. 文档 : https://github.com/axios/axios

1.2. axios 特点

1. 基于 xhr + promise 的异步 ajax 请求库
2. 浏览器端 /node 端都可以使用
3. 支持请求/响应拦截器
4. 支持请求取消
5. 请求 / 响应数据转换
6. 批量发送多个请求

1.3 json-server的介绍与服务搭建

json-server可以快速搭建HTTP服务,后面用axios时需要向服务端发送请求,我们需要服务端这样的角色来与axios结合做实践

 1是id名,获取posts下的第二个id内容

 db.json:

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    },
    {
      "id": 2,
      "title": "尚硅谷大厂学院上线啦",
      "author": "小编"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    },
    {
      "body": "喜大普奔",
      "postId": 2,
      "id": 2
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

1.4 axios的介绍与页面配置

axios是基于promise的http客户端,可以在浏览器和node.js两个环境中运行

在浏览器端,借助于axios可以向服务端发送ajax请求来获取数据,在node.js中,向远端服务发送http请求

支持promise相关操作

对请求和响应数据做转化,可以取消请求

还能自动将结果转化为JSON数据

无论是vue还是react项目,在发送ajax请求这块都是用的axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios配置</title>
    <!-- 把axios连接拿过来引入就行 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <script>
        //使用axios一个变量
        console.log(axios);
    </script>
</body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/109254.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从零开始,开启属于你的 RTE 漫游之旅!丨漫游指南 x 即将启航

&#x1f914; 什么是「开发者漫游指南」&#xff1f; 「开发者漫游指南」邀请热爱前端开发、关心音视频领域发展、希望进入音视频行业、乐于和大家一起交流成长的小伙伴&#xff0c;通过「开发者漫游指南」与社区共同成长&#xff0c;帮助更多的开发者在实时音视频领域取得进…

Linux中gdb的使用

文章目录gdb的使用方法启动gdb之前的准备工作下载gdb拥有一个带有调试信息的可执行程序正式启动gdb展示源码&#xff08;要先看到源码才知道接下来的步骤……&#xff09;打断点显示所有断点信息运行程序逐过程&#xff08;VS中的F10&#xff09;逐语句&#xff08;VS中的F11&a…

实验四、格子世界(Grid World)

一、实验目的 &#xff08;1&#xff09;熟悉动态规划算法中策略评估过程&#xff1b; &#xff08;2&#xff09;了解如何对问题进行建模处理&#xff0c;包括环境、状态、动作、奖惩值的初始化&#xff1b; 二、实验内容与要求 &#xff08;1&#xff09;掌握动态算法基本…

华为机试_HJ27 查找兄弟单词【中等】

目录 描述 输入描述&#xff1a; 输出描述&#xff1a; 解题过程 提交代码 学习代码 代码一 收藏点 描述 定义一个单词的“兄弟单词”为&#xff1a;交换该单词字母顺序&#xff08;注&#xff1a;可以交换任意次&#xff09;&#xff0c;而不添加、删除、修改原有的字…

Linux系统 PHP安装expect扩展详解

今天继续给大家介绍服务器运维相关知识&#xff0c;本文主要内容是Linux系统 PHP安装expect扩展详解。 一、expect简介 expect是基于tcl语言开发的&#xff0c;用于实现自动和交互式任务进行通信&#xff0c;而无须人的干预。expect是建立在tcl基础上的一个工具&#xff0c;还…

Navicat--对比和同步MySQL表结构的方法

原文网址&#xff1a;Navicat--对比和同步MySQL表结构的方法_IT利刃出鞘的博客-CSDN博客 简介 本文介绍如何使用Navicat对比和同步MySQL表结构的方法。 实际项目中会遇到这样的场景&#xff1a;将测试环境的表结构同步到生产环境。 工具> 结构同步 选择源数据库和目标数据…

tensorflow 基本概念和基本操作

op和tensor之间的关系 op是graph上的节点&#xff0c;线就是tensor。 op输入tensor&#xff0c;同时也产出下游的tensor 作为每一个tensor&#xff0c;都会有一个op的属性(attribute)&#xff0c;该op就代表着这个tensor是被什么计算产出的。举个例子&#xff1a; In [74]: w…

Redis6 主从复制

Redis6 主从复制1. 什么是主从复制2. 能做什么3. 配置1主2从3.1 配置3.2 启动redis3.3 配置主从关系4.常见问题4.1 一主二仆5. 主从复制原理6. 薪火相传7. 反客为主1. 什么是主从复制 主机数据更新后根据配置和策略&#xff0c; 自动同步到备机的master/slaver机制&#xff0c…

C++--数据结构--最短路径--Dijkstra--Bellman-Ford算法--Floyd-Warshall算法--高阶0713 14

注&#xff1a;本篇所用的某些未在本文中实现的函数&#xff0c;或不明确的类&#xff0c;均在上篇博客中有详细过程&#xff0c;因篇幅问题不再赘述。 C--数据结构--图的相关概念及模拟实现--高阶0712_Gaze&#xff01;的博客-CSDN博客 1. Dijkstra算法 Dijkstra算法需要开辟…

spring-boot 接收form表单 多文件加多字段数据(postman在form-data格式下传数组和集合)

前言 该博客多用于记录自己的问题 在写项目的时候遇到这种业务情况&#xff1a; 需要保存整个页面的数据&#xff0c;数据包含多个字段信息和多个文件 结合网上的处理思路&#xff0c;我最终实现了这种业务需求并整理一下 前端单独提交字段和文件比较方便简单&#xff0c;本人…

带你读AI论文丨针对文字识别的多模态半监督方法

摘要&#xff1a;本文提出了一种针对文字识别的多模态半监督方法&#xff0c;具体来说&#xff0c;作者首先使用teacher-student网络进行半监督学习&#xff0c;然后在视觉、语义以及视觉和语义的融合特征上&#xff0c;都进行了一致性约束。本文分享自华为云社区《一种针对文字…

构建高性能内存队列:Disruptor

1、 背景 Java中有哪些队列 ArrayBlockingQueue 使用ReentrantLock LinkedBlockingQueue 使用ReentrantLock ConcurrentLinkedQueue 使用CAS 等等 我们清楚使用锁的性能比较低&#xff0c;尽量使用无锁设计。接下来就我们来认识下Disruptor。 2、Disruptor简单使用 github地…

Web3中文|可判115年监禁的FTX创始人SBF即将被引渡到美国

巴哈马总检察长办公室在宣布逮捕FTX前CEO Sam Bankman-Fried时&#xff0c;指出他很可能应美国要求被引渡。 一个多星期后&#xff0c;美国广播公司新闻报道称 &#xff0c;SBF于12月20日签署了引渡文件。 另据彭博社12月20日的一份报告称&#xff0c;该交易所创始人SBF于12月…

Centos7安装配置Minio

Background 官方下载地址&#xff1a;https://github.com/minio/minio/releases 这里给出本次使用的一个版本&#xff1a;minio-2021-05-11T23:27:41Z&#xff0c;提取码&#xff1a;king 1、下载minio文件夹 其他的版本的相关命令可能发生变化&#xff0c;这里只是针对我提供…

基于GIS的生态安全格局构建之生态阻力面的建立

GIS前沿 一、数据来源介绍 &#xff08;一&#xff09;土地利用数据 土地利用数据来自国土资源三次调查数据&#xff08;2018年&#xff09;&#xff0c;根据研究需要对其进行分析处理。 &#xff08;二&#xff09;生态安全等级数据 利用对从生态属性和生态干扰两方面选择的…

Junit5 + YAML 轻松实现参数化和数据驱动,让 App 自动化测试更高效(一)

登录&#xff1a;不同的用户名&#xff0c;不同的密码&#xff0c;不同的组合都需要做登录场景的测试&#xff0c;正常的排列组合下可能会产生多个用例 搜索&#xff1a;不同的搜索条件产生不同的搜索结果&#xff0c;搜索也是常见的测试项&#xff0c;单个搜索参数或者多种搜…

Java---正则表达式

目录 一、正则表达式的介绍 二、正则表达式的基本语法 &#xff08;1&#xff09;字符类 &#xff08;2&#xff09;预定义符 &#xff08;3&#xff09;数量词 三、正则表达式的具体实例 &#xff08;1&#xff09;判断电话号码是否符合规则 &#xff08;2&#xff09;…

git push踩坑记录【看注意事项】

记录一次git push的踩坑过程&#xff08;详细在注意事项里&#xff0c;列出了具体的解决办法&#xff09;。 push远程仓库命令 使用命令 git init git add . git commit -m "提交说明写在这里" git remote add origin gitgithub.com:xxx/surgical-robot.git git p…

4、常用类和对象

文章目录4、常用类和对象4.1 Object4.2 数组4.3 二维数组4.4 二维数组 九层妖塔4.5 冒泡排序4.6 选择排序4.7 二分法查找4.8 字符串4.9 字符串拼接4.10 字符串比较4.11 字符串截断4.12 字符串替换4.13 字符串大小写转换4.14 字符串查询4.15 StringBuilder4.16 包装类4.17 日期类…

windows环境下python和gdal绑定方法

作者:朱金灿 来源:clever101的专栏 为什么大多数人学不会人工智能编程?>>> 编译和安装gdal 此篇介绍的方法并不需要用到pip工具,可依据自己编译的gdal库来灵活绑定。 安装gdal主要是设置两个环境变量:一是gdal的动态库路径加入到path环境变量下,如下图: 二是…