Web前端axios从入门

news2024/11/17 6:39:04

1 axios是什么

前端最流行的 ajax请求库， https://gitcode.net/mirrors/axios/axios?utm_source=csdn_github_accelerator

  • 基于promise的异步ajax请求库
  • 浏览器端/node端都可以使用
  • 支持请求/响应拦截器
  • 支持请求取消
  • 请求/响应数据转换
  • 批量发送多个请求

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

git: https://gitcode.net/mirrors/typicode/json-server?utm_source=csdn_github_accelerator
json-server 详解：https://blog.csdn.net/namechenfl/article/details/120885849
全局安装json-server：npm install -g json-server
创建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
查看id为1的页面在http://localhost:3000.posts/1
其中， /1就是id
在这里插入图片描述

3 axios常用语法及基本安装

在这里插入图片描述
在这里插入图片描述
axios安装：npm install axios
vue项目使用
在main.js

import axios from 'axios'
Vue.prototype.$ajax = axios

html 直接导入就行了：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
</head>

4 axios 的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
</head>

<body>
<div>
    <h2>axios基本使用</h2>
    <button> 发送GET请求</button>
    <button> 发送POST请求</button>
    <button> 发送 PUT 请求</button>
    <button> 发送 DELETE 请求</button>
</div>
<script>
    // 获取按钮
    const btns = document.querySelectorAll('button');

    // 第一个按钮 发送GET请求
    btns[0].onclick = function () {
        // 发送AJAX请求
        axios({
            // 请求类型
            method: 'GET',
            // URL
            url: 'http://localhost:3000/posts/1',
        }).then(response => {
            console.log(response);
        });
    }

    // 第二个按钮 发送POST请求 添加一篇新的文章
    btns[1].onclick = function () {
        // 发送AJAX请求
        axios({
            // 请求类型
            method: 'POST',
            // URL
            url: 'http://localhost:3000/posts',
            // 设置请求体
            data: {
                title: "今天天气很好",
                author: "王五"
            }
        }).then(response => {
            console.log(response);
        });
    }

    // 第三个按钮 发送PUT请求 更新数据
    btns[2].onclick = function () {
        // 发送AJAX请求
        axios({
            // 请求类型
            method: 'PUT',
            // URL
            url: 'http://localhost:3000/posts/3',
            // 设置请求体
            data: {
                title: "今天天气很好",
                author: "赵六"
            }
        }).then(response => {
            console.log(response);
        });
    }

    // 第四个按钮 发送DELETE请求 删除数据
    btns[3].onclick = function () {
        // 发送AJAX请求
        axios({
            // 请求类型
            method: 'delete',  // 大小写都可以
            // URL
            url: 'http://localhost:3000/posts/3',
        }).then(response => {
            console.log(response);
        });
    }

</script>

</body>
</html>
默认get请求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
</head>

<body>
<div>
    <h2>axios基本使用</h2>
    <button> 发送GET请求</button>
    <button> 发送POST请求</button>
    <button> 发送 PUT 请求</button>
    <button> 发送 DELETE 请求</button>
</div>
<script>
    // 获取按钮
    const btns = document.querySelectorAll('button');

    // 第一个按钮 发送GET请求
    btns[0].onclick = function () {
        // 发送AJAX请求
        axios({
            // 请求类型
            method: 'GET',
            // URL
            url: 'http://localhost:3000/posts/1',
        }).then(response => {
            console.log(response);
        });
    }
</script>
</body>
</html>

在这里插入图片描述

对于**axios({})**返回值的理解，其返回的是一个Promise对象

    btns[0].onclick = function () {
        // 发送AJAX请求
        let promise = axios({
            // 请求类型
            method: 'GET',
            // URL
            url: 'http://localhost:3000/posts/1',
        });
        console.log(promise)
    }

在这里插入图片描述

post

    // 第二个按钮 发送POST请求 添加一篇新的文章
    btns[1].onclick = function () {
        // 发送AJAX请求
        axios({
            // 请求类型
            method: 'POST',
            // URL
            url: 'http://localhost:3000/posts',
            // 设置请求体
            data: {
                title: "今天天气很好",
                author: "王五"
            }
        }).then(response => {
            console.log(response);
        });
    }

在这里插入图片描述

put

// 第三个按钮 发送PUT请求 更新数据
    btns[2].onclick = function () {
        // 发送AJAX请求
        axios({
            // 请求类型
            method: 'PUT',
            // URL
            url: 'http://localhost:3000/posts/3',
            // 设置请求体
            data: {
                title: "今天天气很好",
                author: "赵六"
            }
        }).then(response => {
            console.log(response);
        });
    }

在这里插入图片描述

delete

    // 第四个按钮 发送DELETE请求 删除数据
    btns[3].onclick = function () {
        // 发送AJAX请求
        axios({
            // 请求类型
            method: 'delete',  // 大小写都可以
            // URL
            url: 'http://localhost:3000/posts/2',
        }).then(response => {
            console.log(response);
        });
    }

在这里插入图片描述

5 axios 其他方式发送请求

<script>
    // 获取按钮
    const btns = document.querySelectorAll('button');

    // 第一个按钮 发送GET请求
    btns[0].onclick = function () {
        // 与axios()使用方式一样
        axios.request({
            method: 'GET',
            url: 'http://localhost:3000/comments'
        }).then(response => {
            console.log(response);
        });
    }

    // 第二个按钮 发送POST请求 添加一个新的评论
    btns[1].onclick = function () {
        axios.post('http://localhost:3000/comments',
            {
                "body": "我是一条评论",
                "postId": 2
            }).then(response => {
            console.log(response);
        });
    }

</script>

6 axios请求响应结果的结构

在这里插入图片描述

config：配置对象
data：响应体的结果
headers：响应头的信息
request：原生的AJAX请求对象
axios配置对象详细说明

在这里插入图片描述

  • url: 往哪发送请求
  • method: 用什么发
  • baseURL ：设定url的基础结构
  • transFormRequest ：相应完后的预处理
  • headers: 对请求头信息进行处理
    在这里插入图片描述
  • params：设定URL 的参数 例如 post?a=100&b=200
1、axios调用的返回值是Promise实例
2、成功的值叫response 失败的值叫error
3、axios成功的值是一个axios封装的response对象，服务器返回的真正数据在response.data中
4、携带query参数时，编写的配置项叫params
5、携带params参数时，需要自己手动在拼在url中

7 axios默认配置

每写一个请求都要写一遍url路径太麻烦了，为了对重复代码的编写，可以提前设定好配置用axios.defaults

<script>
    // 获取按钮
    const btns = document.querySelectorAll('button')
    // 设置默认配置
    axios.defaults.methods = 'GET'  //设置默认的请求类型为 get
    axios.defaults.baseURL = 'http://localhost:3000'  //设置基础 URL
    axios.defaults.params = {id: 100}
    axios.defaults.timeout = 3000

    btns[0].onclick = function () {
        axios({
            url: '/posts',
        }).then(response => {
            console.log(response);
        })
    }

</script>

在这里插入图片描述

8 axios创建实例对象发送请求

<script>
    const comments = axios.create({
        baseURL: 'http://localhost:3000/',
        timeout: 2000
    });
    const profile = axios.create({
        baseURL: 'http://localhost:3000/profile',
        timeout: 2000
    });
    comments({
        url:'comments'
    }).then(resp => {
        console.log('resp', resp);
    })
    ====等同于如下结果===
    comments.get('comments').then(resp => {
        console.log('resp', resp);
    })
</script>

在这里插入图片描述

9 axios 拦截器

拦截器相当于函数，分为两大类(请求拦截器、相应拦截器)
请求前给数据和内容做一些检测，如果请求没有什么问题就可以请求
当服务器返回结果前：先对结果做一些预处理(格式化处理、记录…)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
</head>

<body>
<div>
    <h2>axios基本使用</h2>
    <button> 发送GET请求</button>
    <button> 发送POST请求</button>
    <button> 发送 PUT 请求</button>
    <button> 发送 DELETE 请求</button>
</div>
<script>
    axios.interceptors.request.use(config => {
        console.log('request interceptors success')
        return config
    }, error => {
        console.log('request interceptors error')
        return Promise.reject(error)
    })

    axios.interceptors.response.use(response => {
        console.log('response interceptors success')
        return response
    }, error => {
        console.log('response interceptors error')
        return Promise.reject(error)
    })

    axios({
        method: 'GET',
        url: 'http://localhost:3000/posts'
    }).then(response => {
        console.log('response', response)
    })

</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响应拦截器 2 => 请求的回调
多个请求拦截器后添加后的执行顺序

在这里插入图片描述
在这里插入图片描述

多个响应拦截器后添加后的执行顺序

在这里插入图片描述
在这里插入图片描述
如果请求拦截发现问题了：
在这里插入图片描述
在这里插入图片描述

响应拦截器：对结果做处理

在这里插入图片描述
在这里插入图片描述

10 取消请求

  1. 配置 cancelToken 对象
  2. 缓存用于取消请求的 cancel 函数
  3. 在后面特定时机调用 cancel 函数取消请求
  4. 在错误回调中判断如果 error 是cancel ，做相应处理
1 点击按钮, 取消某个正在请求中的请求
2 在请求一个接口前, 取消前面一个未完成的请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
</head>

<body>
<div>
    <h2>axios基本使用</h2>
    <button> 发送GET请求</button>
    <button> 发送POST请求</button>
    <button> 发送 PUT 请求</button>
    <button> 发送 DELETE 请求</button>
</div>
<script>
    <!--    获取按钮-->
    const btn = document.querySelectorAll('button')
    //声明全局变量
    let cancel = null;
    btn[0].onclick = function () {
        //检测上一次的请求是否已经完成
        if (cancel !== null) {
            //取消上一次的请求
            cancel();
        }
        axios({
            method: 'GET',
            url: 'http://localhost:3000/posts',
            cancelToken: new axios.CancelToken(flag => {
                cancel = flag
            })
        }).then(Response => {
            console.log(Response)
            //将cancel的值初始化
            cancel = null;
        })
    }
    //绑定第二个事件取消请求
    btn[1].onclick = function () {
        cancel();
    }
</script>
</body>
</html>

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

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

相关文章

论文解读OTA: Optimal Transport Assignment for Object Detection

论文解读OTA: Optimal Transport Assignment for Object Detection

CSDN优秀解读&#xff1a;https://blog.csdn.net/jiaoyangwm/article/details/126638775 2021 https://arxiv.org/pdf/2103.14259.pdf 关键解读 在目标检测中标签分配的最新进展主要寻求为每个GT对象独立定义正/负训练样本。在本文中&#xff0c;我们创新性地从全局的角度重…
阅读更多...
SpringCloudAlibaba商城实战项目（day01）

SpringCloudAlibaba商城实战项目（day01）

前言 闲来无事在B站找了一个项目&#xff0c;是谷粒商城的项目&#xff0c;于是乎照着在敲这个项目&#xff0c;特此记录一下。会持续更新到这个项目敲完。这个记录偏向小白向&#xff0c;确保你照着敲也可以完成所有项目的搭建。 一、简介 1.1、项目架构图 1.2、服务列表 …
阅读更多...
CAN Bus cable simulation

CAN Bus cable simulation

REF&#xff1a;CAN总线标准接口与布线规范 https://zhuanlan.zhihu.com/p/34333969高速CAN总线物理层对线束的要求 https://www.suncve.com/the-requirement-of-physical-layer-of-can-bus-for-wiring-harness/利用LTSPICE 做仿真&#xff0c; 选用的是 ADI的 CAN transceiver…
阅读更多...
RabbitMQ快速入门之进阶

RabbitMQ快速入门之进阶

RabbitMQ快速入门之进阶 进阶RabbitMQ快速入门之进阶1、confirm 模式的设置2、return 退回模式的处理3、消费者 Ack&#xff0c;手动确认4、消费端限流 (流量削缝)5、TTL存活时间过期时间6、死信队列DLX7、延迟队列 &#xff08;TTL DLX&#xff09;1、confirm 模式的设置 *c…
阅读更多...
VSCode使用Clangd

VSCode使用Clangd

前言 在使用微软的C/C插件时&#xff0c;遇到较大项目时&#xff0c;代码提示速度非常的慢&#xff0c;这时可以使用clangd 1、系统安装clangd 版本选择&#xff1a;Linux github仓库: https://github.com/clangd/clangd/releases 解压下载好的安装包&#xff1a; unzip cla…
阅读更多...
Python实现小米蓝牙温湿度计2 Home Assistant 自定义组件源码

Python实现小米蓝牙温湿度计2 Home Assistant 自定义组件源码

小米 米家蓝牙温湿度计2 这是一个Home Assistant自定义组件&#xff0c;用于 Home Assistant 通过 蓝牙适配器 直接集成 小米 米家蓝牙温湿度计 (LYWSDCGQ/01ZM) 和 米家蓝牙温湿度计2 (LYWSD03MMC)。 v0.2.0-dev版本以后&#xff0c;已经支持自动发现功能&#xff0c;不需要…
阅读更多...
Leetcode：501. 二叉搜索树中的众数（C++）

Leetcode：501. 二叉搜索树中的众数（C++）

目录 问题描述&#xff1a; 实现代码与解析&#xff1a; 通用写法&#xff08;递归&#xff09;&#xff1a; 原理思路&#xff1a; 依据二叉搜索树特性写法&#xff08;递归&#xff09;&#xff1a; 原理思路&#xff1a; 迭代&#xff1a; 原理思路&#xff1a; 问题…
阅读更多...
Android Compose——一个简单的新闻APP

Android Compose——一个简单的新闻APP

Owl简述效果视频导航导航结点路线图底部导航栏使用标签页状态切换FeaturePage构建CoursePage实现搜索ViewModelView详情页DetailDescribeLesson尾Gitte简述 此Demo是参考Google Github其中一个Demo而完成&#xff0c;涉及的内容并不复杂&#xff0c;主要是为了熟悉Compose编码…
阅读更多...
2022爱分析･出海数字化系列报告之“出海实时互动与通信”厂商全景报告 | 爱分析报告

2022爱分析･出海数字化系列报告之“出海实时互动与通信”厂商全景报告 | 爱分析报告

报告编委 张扬 爱分析联合创始人&首席分析师 文鸿伟 爱分析高级分析师 王鹏 爱分析分析师 目录 研究范围定义厂商全景地图市场分析与厂商评估入选厂商列表研究范围定义 研究范围 改革开放四十多年来&#xff0c;中国企业经历了自商品出海到当前的品牌出海&#xff0c;出海…
阅读更多...
Servlet的使用

Servlet的使用

作者&#xff1a;~小明学编程 文章专栏&#xff1a;JavaEE 格言&#xff1a;热爱编程的&#xff0c;终将被编程所厚爱。 目录 什么是Servlet&#xff1f; 创建一个Servlet程序 1.创建一个Maven项目 2.引入依赖 3.创建目录 4.编写代码 5.打包 6.部署程序 7.验证程序 …
阅读更多...
Rust如何进行模块化开发？

Rust如何进行模块化开发？

类似es6的模块化&#xff0c;Rust通过package、create、module来实现代码的模块化管理 Rust如何进行模块化开发&#xff1f; Rust的代码组织包括&#xff1a;哪些细节可以暴露&#xff0c;哪些细节是私有的&#xff0c;作用域内哪些名称有效等等。 而这些功能被统称为模块系统…
阅读更多...
晒成绩单了，百度智能云交出2022年终大考试卷！

晒成绩单了，百度智能云交出2022年终大考试卷！

晒成绩单了&#xff0c;百度智能云交出2022年终大考试卷&#xff01; 2023年伊始&#xff0c;工厂加快步伐复工复产、城市烟火气涌现、消费活力加速释放&#xff0c;企业对未来发展呈现乐观预期。有外媒称&#xff0c;“中国经济将实现比预期更快的复苏””。 站在更宏观的视…
阅读更多...
java入门到废为止

java入门到废为止

目录基础数据变量类型数据类型基本类型上下转型引用类型类型对比装箱拆箱缓存池输入数据数组初始化元素访问内存分配数组异常二维数组运算参数形参实参可变参数方法方法概述定义调用注意事项方法重载重载介绍方法选取继承重载参数传递枚举Debug对象概述类定义构造器包封装thiss…
阅读更多...
【React】二.JSX

【React】二.JSX

目录 二.JSX JSX的基本使用 jsx使用步骤 JSX中使用JavaScript表达式 嵌入JS表达式 注意点 JSX的条件渲染 问题记录 JSX的列表渲染 JSX的样式处理 总结 二.JSX JSX的基本使用 createElement()的问题繁琐不简洁不能直观看出所描述的结构不优雅&#xff0c;用户体验不佳…
阅读更多...
Java设计模式-代理模式Proxy

Java设计模式-代理模式Proxy

介绍 代理模式是一种比较好理解的设计模式。简单来说就是 我们使用代理对象来代替对真实对象(real object)的访问&#xff0c;这样就可以在不修改原目标对象的前提下&#xff0c;提供额外的功能操作&#xff0c;扩展目标对象的功能。 代理模式的主要作用是扩展目标对象的功能&a…
阅读更多...
Linux编译器-gcc/g++的使用

Linux编译器-gcc/g++的使用

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容主要介绍了Linux编译器g/gcc的相关使用方法&#xff0c…
阅读更多...
Linux学习笔记——分布式内存计算Flink环境部署

Linux学习笔记——分布式内存计算Flink环境部署

5.13、分布式内存计算Flink环境部署 5.13.1、简介 Flink同Spark一样&#xff0c;是一款分布式内存计算引擎&#xff0c;可以支撑海量数据的分布式计算。 Flink在大数据体系同样是明星产品&#xff0c;作为最新一代的综合计算引擎&#xff0c;支持离线计算和实时计算。 在大…
阅读更多...
libcurl库及curl API的简介

libcurl库及curl API的简介

目录 一、libcurl简介 二、curl API简介 三.库安装编译方法 内容来源&#xff1a;Http协议之libcurl实现 - 谢呈勖 - 博客园 (cnblogs.com) 一、libcurl简介 libcurl是一个跨平台的网络协议库&#xff0c;支持http, https, ftp, gopher, telnet, dict, file, 和ldap 协议。…
阅读更多...
当 Rainbond 遇上龙蜥！小龙带你玩转一站式云原生，点击开启

当 Rainbond 遇上龙蜥！小龙带你玩转一站式云原生，点击开启

Rainbond 是一个云原生应用管理平台&#xff0c;使用简单&#xff0c;不需要懂容器、Kubernetes 和底层复杂技术&#xff0c;支持管理多个 Kubernetes 集群&#xff0c;和管理企业应用全生命周期。主要功能包括应用开发环境、应用市场、微服务架构、应用交付、应用运维、应用级…
阅读更多...
Golang的Fork/Join实现

Golang的Fork/Join实现

做过Java开发的同学肯定知道&#xff0c;JDK7加入的Fork/Join是一个非常优秀的设计&#xff0c;到了JDK8&#xff0c;又结合并行流中进行了优化和增强&#xff0c;是一个非常好的工具。1、Fork/Join是什么Fork/Join本质上是一种任务分解&#xff0c;即&#xff1a;将一个很大的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023