axios介绍和使用

简介

本文主要讲解axios的概念和基本使用。

axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。

支持的功能：

  • 从浏览器发出 XMLHttpRequests请求。
  • 从 node.js 发出 http 请求。
  • 支持 Promise API。
  • 能拦截请求和响应。
  • 能转换请求和响应数据。
  • 取消请求。
  • 实现JSON数据的自动转换。
  • 客户端支持防止 XSRF攻击。

先借助json-server创建一个简单的服务，供ajax发送请求，json-server是一个简单的可以接收restful的服务。

github地址：https://github.com/typicode/json-server

第一步：安装：npm install -g json-server
在这里插入图片描述
第二步：创建一个名为db.json的文件，把网站的数据复制进去。

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

第三步：启动命令：json-server --watch db.json
在这里插入图片描述
访问http://localhost:3000/posts 下面页面为成功

在这里插入图片描述

使用axios

GitHub地址：https://github.com/axios/axios

在这里插入图片描述
为了方便，我们直接使用第四种。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基本使用</title>
</head>
<body>
    <button id="btn1">发送get请求</button> <br><br>
    <button id="btn2">发送post请求</button><br><br>
    <button id="btn3">发送put请求</button><br><br>
    <button id="btn4">发送delete请求</button>

    <hr>

    <div>其他发送请求的api:</div><br><br>
    <button id="btn5">发送get请求1</button> <br><br>
    <button id="btn6">发送post请求1</button><br><br>
    <button id="btn7">发送put请求1</button><br><br>
    <button id="btn8">发送delete请求1</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    //发送get
    document.getElementById("btn1").onclick = function(){
       axios({
        method:"GET",
        url:"http://localhost:3000/posts/1"
       }).then(response=>{
           console.log(response);
       })
    };

    //发送post
    document.getElementById("btn2").onclick = function(){
       axios({
        method:"POST",
        url:"http://localhost:3000/posts",
        data:{
            title:"axios学习",
            author:"Yehaocong"
        }
       }).then(response=>{
           console.log(response);
       })
    };
    //发送put
    document.getElementById("btn3").onclick = function(){
       axios({
        method:"PUT",
        url:"http://localhost:3000/posts/2",
        data:{
            title:"axios学习",
            author:"Liaoxiaoyan"
        }
       }).then(response=>{
           console.log(response);
       })
    };
    document.getElementById("btn4").onclick = function(){
       axios({
        method:"DELETE",
        url:"http://localhost:3000/posts/2",
       }).then(response=>{
           console.log(response);
       })
    };



    //其他发送请求的api

    
    document.getElementById("btn5").onclick = function(){
        //发送get,使用get，第一个参数时url，第二个参数时config配置对象
       axios.get("http://localhost:3000/posts/1")
       .then(response=>{
           console.log(response);
       })
    };

    //发送post
    document.getElementById("btn6").onclick = function(){
        //发送post请求，第一个参数时url，第二个参数时请求体，第三个参数时config配置对象
        axios.post("http://localhost:3000/posts",
        {title:"axios学习2",
            author:"Yehaocong2"})
            .then(response=>{
           console.log(response);
       })
    };
    //发送put,
    document.getElementById("btn7").onclick = function(){
        //发送put,接收三个参数，url  请求体 、 config配置对象
       axios.put("http://localhost:3000/posts/2",{title:"axios学习",
            author:"Liaoxiaoyan"})
       .then(response=>{
           console.log(response);
       })
    };
    document.getElementById("btn8").onclick = function(){
        //发送delete请求，接收2个参数， url config配置对象
        axios.delete("http://localhost:3000/posts/3")
       .then(response=>{
           console.log(response);
       })
    };

    //这个与axios({})基本相同
    // axios.request({

    // })
</script>
</html>

请求的响应结果结构分析：
在这里插入图片描述

配置对象常用的配置项：
{
  // 路径url
  url: '/user',

  // 请求方法，默认get
  method: 'get', 

  //基础url，最终请求的url是 baseURL+url拼接，所以再全局设置默认，可以使得发送请求时的url变得简洁
  baseURL: 'https://some-domain.com/api/',

  //设置请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //设置请求url的query参数，可以使得url简洁。
  //比如url是https://some-domain.com/api/user  然后params如下设置，那么最终的url是：
  //https://some-domain.com/api/user?ID=12345&name=Jack
  params: {
    ID: 12345,
    name:"Jack"
  },


 //设置请求体
  data: {
    firstName: 'Fred'
  },
  
  //设置请求的另外一种格式，不过这个是直接设置字符串的
  data: 'Country=Brasil&City=Belo Horizonte',

 //请求超时，单位毫秒，默认0，不超时。
  timeout: 1000,

  //响应数据类型，默认json
  responseType: 'json', 

  //响应数据的编码规则，默认utf-8
  responseEncoding: 'utf8',


	//响应体的最大长度 
  maxContentLength: 2000,

  // 请求体的最大长度
  maxBodyLength: 2000,

  //设置响应状态码为多少时是成功，调用resolve，否则调用reject失败
  //默认是大于等于200，小于300
  validateStatus: function (status) {
    return status >= 200 && status < 300; 
  },
默认配置

可以设置全局默认配置，是为了避免多种重复配置在不同请求中重复，比如baseURL、timeout等，这里设置baseURL。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>默认配置</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        axios.defaults.baseURL="http://localhost:3000";

        //因为上面配置了baseURL，所以我们之后的请求只需要配置url不用像之前那样的全路径
        axios.get("/posts/1")
       .then(response=>{
           console.log(response);
       })

    
    </script>
</body>
</html>

在这里插入图片描述

axios拦截器

实质就是函数。
分为两种类型：

  • 请求拦截器：用于拦截请求，自定义做一个逻辑后再把请求发送，可以用于配置公用的逻辑，就不用每个请求都配一遍。
  • 响应拦截器：用于拦截响应，做一些处理后再出发响应回调。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios拦截器</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //这个是设置请求拦截器的api，传入两个回调，第一个成功回调，第二个失败回调。
        axios.interceptors.request.use(
            function(config){
                console.log("请求拦截器1调用成功");
                return config;
            },
            function(error){
                console.log("请求拦截器1调用失败");
                return Promise.reject(error)
            }
        )

        //这个是设置响应拦截器的api，第一个成功回调，第二个失败回调
        axios.interceptors.response.use(
            function(response){
                console.log("响应拦截器1调用成功");
                return response;
            },
            function(error){
                console.log("响应拦截器1调用失败");
                return Promise.reject(error);
            }
        )

        axios.get("http://localhost:3000/posts/1")
        .then(function(response){
            //
            console.log("请求回调成功");
        }).catch(function(error){
            console.log("请求回调失败");
        })
    </script>
</body>
</html>

效果：
在这里插入图片描述
要理解这些个拦截器需要由一定的es6 Promise基础，出现上面效果的原因是，发送请求前，请求被请求拦截器拦截了，并且请求拦截器返回了一个非Promise实例的对象config，所以下一个拦截器是调用成功回调的，所以就打印响应拦截器成功，然后响应拦截器成功的回调返回的是非Promise实例的对象response，所以最终的请求回调是调用成功的回调，所以返回请求调用成功。

尝试以下再请求拦截器的成功回调中，返回reject状态的Promise。
在这里插入图片描述
效果：
在这里插入图片描述
出现上面效果的原因是，请求拦截器的成功回调中最后返回了reject状态的Promise实例对象，被判断为失败，到了回调链的下一回调，也就是响应拦截器的回调时，调用的时失败的回调，失败的回调中又返回了reject状态的Promise实例对象，所以到了真正请求的回调页调用了失败回调。

上面的效果与Promise如出一辙。

多个拦截器的效果：加了一个请求拦截器一个响应拦截器：
在这里插入图片描述

在这里插入图片描述
可以看到请求拦截器类似栈，后进先出，响应拦截器类似队列，先进先出。

可以在请求拦截器中对config进行调整，比如添加一个超时什么的，可以在响应拦截器中对response返回值进行调整，比如我返回到回调函数中只想要响应体部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios拦截器</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //这个是设置请求拦截器的api，传入两个回调，第一个成功回调，第二个失败回调。
        axios.interceptors.request.use(
            function(config){
                console.log("请求拦截器1调用成功");
                return config;
            },
            function(error){
                console.log("请求拦截器1调用失败");
                return Promise.reject(error)
            }
        )

        axios.interceptors.request.use(
            function(config){
                //设置请求超时时间
                config.timeout = 5000;
                console.log("请求拦截器2调用成功");
                return config;
            },
            function(error){
                console.log("请求拦截器2调用失败");
                return Promise.reject(error)
            }
        )

        //这个是设置响应拦截器的api，第一个成功回调，第二个失败回调
        axios.interceptors.response.use(
            function(response){
                console.log("响应拦截器1调用成功");
                 console.log(response);
                //返回到请求回调时，只要data数据
                return response.data;
            },
            function(error){
                console.log("响应拦截器1调用失败");
                return Promise.reject(error);
            }
        )
        axios.interceptors.response.use(
            function(response){
                console.log("响应拦截器2调用成功");
                return response;
            },
            function(error){
                console.log("响应拦截器2调用失败");
                return Promise.reject(error);
            }
        )

        axios.get("http://localhost:3000/posts/1")
        .then(function(response){
            //
            console.log("请求回调成功");
            console.log(response);
        }).catch(function(error){
            console.log("请求回调失败");
        })
    </script>
</body>
</html>

效果：
在这里插入图片描述

取消请求

取消请求就是发送了请求后，等待一段时间得不到回应，可以取消他。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios取消请求</title>
</head>
<body>
    <button id="btn1">发送请求</button>
    <button id="btn2">取消请求</button>



    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //第一步：定义一个全局的cancel变量，初始值是null
        let cancel = null;
        document.getElementById("btn1").onclick = function(){
            axios.get("http://localhost:3000/posts/1",
            {
                //第二步：在请求的配置对象中，配置cancelToken属性值，并把函数的c参数赋值给全局变量cancel
                cancelToken:new axios.CancelToken(function(c){
                    cancel = c;
                })
            })
        .then(function(response){
            //
            console.log(response);
        }).catch(function(error){
            console.log("请求回调失败");
        })
        }

        document.getElementById("btn2").onclick = function(){
            //第三步：调用cancel函数就是取消请求接收
            cancel();
        }
    </script>
</body>
</html>

需要把服务器的响应时间调到3秒，不然太快的话，演示不了取消请求。。

json-server  --watch  db.json -d 3000

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

中文文献怎么查找，带你了解中文文献查找途径及方法

中文文献怎么查找，带你了解中文文献查找途径及方法

在我们撰写论文和科研工作时经常会查找文献资料&#xff0c;今天带大家了解中文文献查找途径及方法。 查找中文文献常用网站有&#xff1a; 文献党下载器&#xff08;wxdown.org&#xff09;:是一个几乎整合了所有中外文献数据库资源的文献下载平台&#xff0c;因为资源最多&a…
阅读更多...
手机（Android）刷NetHunter安装指南，无需ssh执行kali命令, NetHunter支持的无线网卡列表！

手机（Android）刷NetHunter安装指南，无需ssh执行kali命令, NetHunter支持的无线网卡列表！

一、安装NetHunter 前提&#xff1a;确保手机已经root&#xff0c;已装上magisk。如果没有root&#xff0c;可用尝试magisk root 后执行此文 1、下载Nethunter&#xff1a;Get Kali | Kali Linux 然后push 到sdcard 里&#xff0c; 2、打开magisk&#xff0c;选择刚刚下好的…
阅读更多...
【Python学习笔记】b站@同济子豪兄 用pytorch搭建全连接神经网络，对Fashion-MNIST数据集中的时尚物品进行分类

【Python学习笔记】b站@同济子豪兄 用pytorch搭建全连接神经网络，对Fashion-MNIST数据集中的时尚物品进行分类

【Python学习笔记】原作b站同济子豪兄 用pytorch搭建全连接神经网络&#xff0c;对Fashion-MNIST数据集中的时尚物品进行分类 跟着b站同济子豪兄的视频自学写的代码&#xff0c;内容是用pytorch搭建全连接神经网络&#xff0c;对Fashion-MNIST数据集中的时尚物品进行分类 视频…
阅读更多...
Spring整体架构包含哪些组件？

Spring整体架构包含哪些组件？

Spring是一个轻量级java开源框架。Spring是为了解决企业应用开发的复杂性而创建的&#xff0c;它使用基本的JavaBean来完成以前只可能由EJB完成的事情。 Spring的用途不仅限于服务器端的开发&#xff0c;从简单性、可测试性和松耦合的角度而言&#xff0c;任何java应用都可以从…
阅读更多...
原神 Android 教程 —安卓版

原神 Android 教程 —安卓版

准备材料 一台能读写 /system 分区的 Android 手机（或：一台安装了 Magisk 的 Android 手机） 有人搞出来免root端了，此条件不再必须私服客户端
阅读更多...
小米应用商店上架app隐私不合规自查整改办法

小米应用商店上架app隐私不合规自查整改办法

目前各大应用商店都上线了上架app隐私合规检测机制&#xff0c;以小米应用商店为例&#xff0c;只有符合法律法规及应用隐私合规上架标准要求的app才能顺利上架并展示给用户下载使用。已上架app在巡检中如果发现不满足应用隐私合规要求的&#xff0c;也会被下架处理。app隐私不…
阅读更多...
ActiveMQ(三)

ActiveMQ(三)

协议配置 ActiveMQ 支持的协议有 TCP 、 UDP、NIO、SSL、HTTP(S) 、VM 这是activemq 的activemq.xml 中配置文件设置协议的地方 <transportConnector name"openwire" uri"tcp://0.0.0.0:61616?maximumCon nections1000&amp;wireFormat.maxFrameSiz…
阅读更多...
利用摄影测量进行地形建模的介绍

利用摄影测量进行地形建模的介绍

一、前言 从一个地方到另一个地方的地球表面由连续和突然的海拔变化组成&#xff0c;个人和社会都必须应对这些变化。 水从高山和丘陵向下流&#xff0c;从溪流流入河流&#xff0c;形成三角洲&#xff0c;最终汇入大海。 三维 (3D) 地面信息的获取和表示一直是与行星表面相关的…
阅读更多...
RK3568平台开发系列讲解（调试篇）Linux 内核的日志打印

RK3568平台开发系列讲解（调试篇）Linux 内核的日志打印

🚀返回专栏总目录 文章目录 一、dmseg 命令二、查看 kmsg 文件三、调整内核打印等级沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇将 Linux 内核的日志打印进行梳理。 一、dmseg 命令 在终端使用 dmseg 命令可以获取内核打印信息，该命令的具体使用方法如下所…
阅读更多...
Downie 4 4.6.12 MAC上最好的一款视频下载工具

Downie 4 4.6.12 MAC上最好的一款视频下载工具

Downie for Mac 简介 Downie是Mac下一个简单的下载管理器&#xff0c;可以让您快速将不同的视频网站上的视频下载并保存到电脑磁盘里然后使用您的默认媒体播放器观看它们。 Downie 4 Downie 4 for Mac Downie 4 for Mac软件特点 支持许多站点 -当前支持1000多个不同的站点&…
阅读更多...
叮咚，您有一封告白信件待查收（原生HTML+CSS+JS绘制表白信件，代码+链接+步骤详解）

叮咚，您有一封告白信件待查收（原生HTML+CSS+JS绘制表白信件，代码+链接+步骤详解）

马上就要5月20号啦&#xff0c;准备好如何向心仪的她/他表白了嘛&#xff01;特此出一篇告白小信件&#xff0c;效果图如下。纯htmlcss绘制&#xff0c;包含详细教程注释&#xff0c;干货满满哦。 链接置于文章结尾总结处。 文章目录一、叮咚&#xff01;查收您的信件&#x…
阅读更多...
Spring Cloud Alibaba全家桶（七）——Sentinel控制台规则配置

Spring Cloud Alibaba全家桶（七）——Sentinel控制台规则配置

前言 本文小新为大家带来 Sentinel控制台规则配置 相关知识&#xff0c;具体内容包括流控规则&#xff08;包括&#xff1a;QPS流控规则&#xff0c;并发线程数流控规则&#xff09;&#xff0c;BlockException统一异常处理&#xff0c;流控模式&#xff08;包括&#xff1a;直…
阅读更多...
thinkphp内核开源商城APP小程序H5开源源码讲解

thinkphp内核开源商城APP小程序H5开源源码讲解

系统功能介绍 支持点餐、桌码点餐 知识付费、家政功能 公众号管理 设置自定义菜单、被关注回复、关键字回复&#xff0c;查看公众号粉丝、素材管理、素材群发、模板消息群发、活跃粉丝群发等功能 用户领卡后在微信卡包中展示&#xff0c;实现会员卡买单消费等功能&#xff0c;…
阅读更多...
Python实战，爬取金融期货数据

Python实战，爬取金融期货数据

大家好&#xff0c;我是毕加锁。 今天给大家带来的是 Python实战&#xff0c;爬取金融期货数据 文末送书&#xff01; 文末送书&#xff01; 文末送书&#xff01; 任务简介 首先&#xff0c;客户原需求是获取https://hq.smm.cn/copper网站上的价格数据(注&#xff1a;获取的是…
阅读更多...
【LeetCode】剑指 Offer 39. 数组中出现次数超过一半的数字 p205 -- Java Version

【LeetCode】剑指 Offer 39. 数组中出现次数超过一半的数字 p205 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/shu-zu-zhong-chu-xian-ci-shu-chao-guo-yi-ban-de-shu-zi-lcof/ 1. 题目介绍&#xff08;39. 数组中出现次数超过一半的数字&#xff09; 数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。 你可…
阅读更多...
js 数据类型

js 数据类型

1.概念 数据类型指的是可以在程序中存储和操作的值的类型&#xff0c;每种编程语言都有其支持的数据类型&#xff0c;不同的数据类型用来存储不同的数据&#xff0c;例如文本、数值、图像等。 JavaScript 是一种动态类型的语言&#xff0c;在定义变量时不需要提前指定变量的类…
阅读更多...
如何用iOS自带摄像头进行拍摄获取视频流以及OpenCV图像处理实时显示

如何用iOS自带摄像头进行拍摄获取视频流以及OpenCV图像处理实时显示

目录概述一、如何用Swift调用OpenCV库1.项目引入OpenCV库2.桥接OpenCV及Swift二、运用AVFoundation获取实时图像数据1.建立视频流数据捕获框架2.建立 Capture Session3.取得并配置 Capture Devices4.设定 Device Inputs5.配置Video Data Output输出6.工程隐私权限配置7.处理相机…
阅读更多...
基于Java Web的图书管理系统

基于Java Web的图书管理系统

目录 1.系统简要概述 2.系统主要用到的数据库表 3.主要功能 管理员&#xff1a; 用户&#xff1a; 3.1管理员功能 3.11登录 3.12添加学生 3.13查看学生 3.14删除学生 3.15添加书籍 3.16查看书籍 3.2用户端功能 3.2.1登录 3.2.2注册 3.2.3查询图书 3.2.4借阅书籍…
阅读更多...
【云原生】初识 Kubernetes — pod 的前世今生

【云原生】初识 Kubernetes — pod 的前世今生

目录标题前言&#x1f433; Kubernetes到底是什么&#xff1f;&#x1f42c; K8s 的由来&#x1f42c;K8s 的工作方式&#x1f42c; K8s 主要组件&#x1f40b;Master 组件&#x1f40b;Node 组件&#x1f433; pod 是什么&#xff1f;&#x1f42c;pod 的概念&#x1f42c;控制…
阅读更多...
Kafka在Mac下的安装与使用

Kafka在Mac下的安装与使用

mac 安装kafka安装kafka的原因安装kafka启动Zookeeper启动Kafka创建topic查看topic生产数据消费数据关闭zookeeper关闭kafka测试安装kafka的原因 用户微服务登录后需要向广告微服务中发送用户登录的信息以获取用户画像&#xff08;这个过程是异步的&#xff09;&#xff0c;故…
阅读更多...
最新文章

Copyright @ 2022~2023