详解axios（快速入门）

article/2025/5/11 4:07:10

axios这一篇就够啦~

  • axios
    • 1、axios的理解和使用
      • 1.1 axios概述
      • 1.2 axios特点
      • 1.3 axios常用语法
      • 1.4 难点语法的理解和使用
    • 2、axios源码分析
      • 2.1 源码目录结构
      • 2.2 源码分析

axios

1、axios的理解和使用

1.1 axios概述

  1. 前端最流行的ajax请求库

  2. react/vue官方都推荐使用axios 发ajax 请求

  3. 文档: https://github.com/axios/axios

  4. axios中文网：axios中文网|axios API 中文文档 | axios (axios-js.com)

在这里插入图片描述

1.2 axios特点

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

1.3 axios常用语法

  • axios(config):通用/最本质的发任意类型请求的方式
  • axios(url[, config]):可以只指定url发get 请求
  • axios.request(config):等同于axios(config)
  • axios.get(url[, config]):发get请求
  • axios.delete(url[, config]):发delete请求
  • axios.post(url[, data, config]):发post请求
  • axios.put(url[, data, configl):发put 请求
  • axios.defaults.xxx:请求的默认全局配置
  • axios.interceptors.request.use():添加请求拦截器
  • axios.interceptors.response.use():添加响应拦截器
  • axios.create([config]):创建一个新的axios(它没有下面的功能)
  • axios.Cancel():用于创建取消请求的错误对象
  • axios.CancelToken():用于创建取消请求的token对象
  • axios.isCancel():是否是一个取消请求的错误
  • axios.all(promises):用于批量执行多个异步请求
  • axios.spread():用来指定接收所有成功数据的回调函数的方法

在这里插入图片描述

  • axios基本使用
    //获取按钮const btns = document.querySelectorAll('button');//第一个btns[0].onclick = function () {//发送 AJAX 请求axios({//请求类型method: 'GET',//URLurl: 'http://localhost:3000/posts/2',}).then(response => {console.log(response);});}//添加一篇新的文章btns[1].onclick = function () {//发送 AJAX 请求axios({//请求类型method: 'POST',//URLurl: 'http://localhost:3000/posts',//设置请求体data: {title: "今天天气不错, 还挺风和日丽的",author: "张三"}}).then(response => {console.log(response);});}//更新数据btns[2].onclick = function () {//发送 AJAX 请求axios({//请求类型method: 'PUT',//URLurl: 'http://localhost:3000/posts/3',//设置请求体data: {title: "今天天气不错, 还挺风和日丽的",author: "李四"}}).then(response => {console.log(response);});}//删除数据btns[3].onclick = function () {//发送 AJAX 请求axios({//请求类型method: 'delete',//URLurl: 'http://localhost:3000/posts/3',}).then(response => {console.log(response);});}
  • axios其他使用
//获取按钮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()axios.post('http://localhost:3000/comments',{"body": "喜大普奔","postId": 2}).then(response => {console.log(response);})}
  • axios默认配置
    //获取按钮const btns = document.querySelectorAll('button');//默认配置axios.defaults.method = 'GET';//设置默认的请求类型为 GETaxios.defaults.baseURL = 'http://localhost:3000';//设置基础 URLaxios.defaults.params = { id: 100 };axios.defaults.timeout = 3000;//btns[0].onclick = function () {axios({url: '/posts'}).then(response => {console.log(response);})}

1.4 难点语法的理解和使用

axios.create(config)

  1. 根据指定配置创建一个新的axios，也就是每个新axios都有自己的配置
  2. 新axios 只是没有取消请求和批量发请求的方法，其它所有语法都是一致的
  3. 为什么要设计这个语法?
    (1)需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一
    样，如何处理
    (2)解决:创建2个新axios，每个都有自己特有的配置，分别应用到不同要
    求的接口请求中

拦截器函数/ajax请求/请求的回调函数的调用顺序

  1. 说明:调用axios()并不是立即发送ajax请求，而是需要经历一个较长的流程
  2. 流程:请求拦截器2=>请求拦截器1=>发ajax请求=>响应拦截器1=>响
    应拦截器2=>请求的回调 (unshift,push)
  3. 注意:此流程是通过promise串连起来的，请求拦截器传递的是config，响应
    拦截器传递的是response
  • 代码：
    // Promise// 设置请求拦截器  config 配置对象axios.interceptors.request.use(function (config) {console.log('请求拦截器 成功 - 1号');//修改 config 中的参数config.params = { a: 100 };return config;}, function (error) {console.log('请求拦截器 失败 - 1号');return Promise.reject(error);});axios.interceptors.request.use(function (config) {console.log('请求拦截器 成功 - 2号');//修改 config 中的参数config.timeout = 2000;return config;}, function (error) {console.log('请求拦截器 失败 - 2号');return Promise.reject(error);});// 设置响应拦截器axios.interceptors.response.use(function (response) {console.log('响应拦截器 成功 1号');return response.data;// return response;}, 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({method: 'GET',url: 'http://localhost:3000/posts'}).then(response => {console.log('自定义回调处理成功的结果');console.log(response);});

取消请求

  1. 基本流程
    配置cancelToken对象
    缓存用于取消请求的cancel函数
    在后面特定时机调用cancel函数取消请求
    在错误回调中判断如果error是cancel，做相应处理
  2. 实现功能
    点击按钮，取消某个正在请求中的请求
  • 代码：
	//获取按钮const btns = document.querySelectorAll('button');//2.声明全局变量let cancel = null;//发送请求btns[0].onclick = function () {//检测上一次的请求是否已经完成if (cancel !== null) {//取消上一次的请求cancel();}axios({method: 'GET',url: 'http://localhost:3000/posts',//1. 添加配置对象的属性cancelToken: new axios.CancelToken(function (c) {//3. 将 c 的值赋值给 cancelcancel = c;})}).then(response => {console.log(response);//将 cancel 的值初始化cancel = null;})}//绑定第二个事件取消请求btns[1].onclick = function () {cancel();}

2、axios源码分析

2.1 源码目录结构

在这里插入图片描述

2.2 源码分析

axios 与Axios的关系

  1. 从语法上来说: axios不是Axios 的实例 (对象，函数，实例对象的方法添加到函数身上)
  2. 从功能上来说: axios是Axios的实例 (拥有实例对象上的方法)
  3. axios是Axios.prototype.request 函数bind()返回的函数
  4. axios作为对象有Axios原型对象上的所有方法，有Axios对象上所有属性

instance 与axios的区别

  1. 相同:
    (1都是一个能发任意请求的函数: request(config)

    (2)都有发特定请求的各种方法:get()/post()/put()/delete()

    (3)都有默认配置和拦截器的属性: defaults/interceptors

  2. 不同:

    (1)默认配置很可能不一样

    (2)instance没有axios后面添加的一些方法: create()/CancelToken()/all()

axios运行的整体流程

在这里插入图片描述

  1. 整体流程:
    request(config) ==> dispatchRequest(config) ==> xhrAdapter(config)

  2. request(config):
    将请求拦截器/ dispatchRequest()/响应拦截器通过promise链串连起来，返回promise

  3. dispatchRequest(config):
    转换请求数据== =>调用xhrAdapter()发请求 ===>请求返回后转换响应数据.返回 promise

  4. xhrAdapter(config):
    创建XHR对象，根据config进行相应设置，发送特定请求，并接收响应数据，返回promise

axios的请求/响应拦截器是什么

在这里插入图片描述

  1. 请求拦截器:
    • 在真正发送请求前执行的回调函数
    • 可以对请求进行检查或配置进行特定处理
    • 成功的回调函数，传递的默认是config(也必须是)
    • 失败的回调函数，传递的默认是error
  2. 响应拦截器
    • 在请求得到响应后执行的回调函数
    • 可以对响应数据进行特定处理
    • 成功的回调函数，传递的默认是response
    • 失败的回调函数，传递的默认是error

axios的请求/响应数据转换器是什么

  1. 请求转换器:对请求头和请求体数据进行特定处理的函数
    if (utils.isObject(data)) {
    setContentTypelfUnset(headers, ‘application/json;charset=utf-8’);
    return JSON.stringify(data);
    }
  2. 响应转换器:将响应体json字符串解析为js对象或数组的函数
    response.data = JSON.parse(response.data)

response的整体结构
{
data,

status,

statusText,

headers,

config,

request
}

error的整体结构
{
message,

response,
request,
}

如何取消未完成的请求

  1. 当配置了cancelToken对象时，保存cancel函数

    (1创建一个用于将来中断请求的cancelPromise

    (2)并定义了一个用于取消请求的cancel函数

    (3)将cancel函数传递出来

  2. 调用cancel()取消请求

    (1)执行cacel 函数，传入错误信息message

    (2)内部会让cancelPromise变为成功，且成功的值为一个Cancel对象

    (3)在cancelPromise 的成功回调中中断请求，并让发请求的 proimse失败，
    失败的reason为 Cancel对象
    ,

headers,

config,

request
}

error的整体结构
{
message,

response,
request,
}

如何取消未完成的请求

  1. 当配置了cancelToken对象时，保存cancel函数

    (1创建一个用于将来中断请求的cancelPromise

    (2)并定义了一个用于取消请求的cancel函数

    (3)将cancel函数传递出来

  2. 调用cancel()取消请求

    (1)执行cacel 函数，传入错误信息message

    (2)内部会让cancelPromise变为成功，且成功的值为一个Cancel对象

    (3)在cancelPromise 的成功回调中中断请求，并让发请求的 proimse失败，
    失败的reason为 Cancel对象


http://chatgpt.dhexx.cn/article/7Wgl0xXd.shtml

相关文章

axios快速上手（简单使用）

axios快速上手（简单使用）

axios对ajax请求进行了封装，并且使用promise的链式调用使得网络请求的代码逻辑更为清晰，同时支持async和await的编写方式使代码看起来像同步，更加方便于理解和阅读。axios这个库的体积也不大，先在项目里进行安装，npm i…
阅读更多...
numpy的使用说明(六)：一招帮你彻底搞懂axis=0和axis=1

numpy的使用说明(六)：一招帮你彻底搞懂axis=0和axis=1

1、关于axis轴的说明 思考：给你一个三维数组，你知道如何设置axis轴的值吗？下面这张图展示的结果你知道怎么来的吗？这些疑问都会在文中给你一一解答。 2、什么是维度？ 举例说明 3、什么是高维，什么是低维…
阅读更多...
axios（1)

axios（1)

json-server的介绍与服务搭建 作用 快速创建一个接口&#xff0c;以供Ajax请求 安装及使用 第三步&#xff08;注意路径以及在运行代码前加上npx&#xff09; axios的介绍与页面配置 在项目中 1.$ npm install axios 2.$ yarn add axios 学习阶段使用CDN方式 <scrip…
阅读更多...
一文读懂Numpy（Tensorflow）里面的轴（Axis）

一文读懂Numpy（Tensorflow）里面的轴（Axis）

目录以及结论 Axis就是数组层级设axisi&#xff0c;则Numpy沿着第i个下标变化的方向进行操作Axis的应用 Axis就是数组层级 要想理解axis&#xff0c;首先我们先要弄清楚“Numpy中数组的维数”和"线性代数中矩阵的维数"这两个概念以及它们之间的关系。在数学或者物…
阅读更多...
axios基础（一）

axios基础（一）

1.封装 最简单的封装&#xff08;这个了解下就行&#xff0c;主要看下下面&#xff09; <button onclick"testPost()">发送POST请求</button><script>function testGet(){axios({url:"https://api.hh2022.cn/main/searchPage/2023/1/5"…
阅读更多...
Axios的简单学习（一文上手Axios！）

Axios的简单学习（一文上手Axios！）

页内目录 一&#xff0c;Axios的介绍 二&#xff0c;Axios的配置 三&#xff0c;Axios的基本格式 四&#xff0c;使用Axios获取数据 一&#xff0c;Axios的介绍 官方介绍 Axios 是一个基于 promise 的 HTTP 库&#xff0c;可以用在浏览器和 node.js 中&#xff0c;在Vue中官方…
阅读更多...
手撕numpy(五)：一招帮你彻底搞懂axis=0和axis=1

手撕numpy(五)：一招帮你彻底搞懂axis=0和axis=1

↑ 关注 星标 ~ 有趣的不像个技术号 每晚九点&#xff0c;我们准时相约 大家好&#xff0c;我是黄同学 手撕numpy系列持续更新中~ 《手撕numpy(一)&#xff1a;简单说明和创建数组的不同方式》 《手撕numpy(二)&#xff1a;各种特性和简单操作》 《手撕numpy(三)&#xff1a…
阅读更多...
Tesorflow学习axis=1

Tesorflow学习axis=1

Tesorflow学习axis1 cnp.concatenate(a,b,axis0) axiso 跨行 import numpy as np anp.array([[1,2,3],[4,5,6]]) print(a,a) bnp.array([[7,8,9],[10,11,12]]) print(b,b) cnp.concatenate((a,b),axis0) print(c,c)axis1 跨列 cnp.concatenate(a,b,axis1) 参考&#xff1a;htt…
阅读更多...
axios（快速入门）

axios（快速入门）

1、axios的理解和使用 1.1 axios的概述 1.前端最流行的ajax请求库 2.react、vue官方都推荐使用axios访问ajax请求 3.文档https://github.com/axios/axios 4.axios中文网axios中文网|axios API 中文文档 | axios (axios-js.com) 1.2 axios的特点 基于xhr promise的异步ajax请求…
阅读更多...
pyechart笔记：opts.AxisOpts

pyechart笔记：opts.AxisOpts

定制化图表的轴线&#xff08;x轴和y轴&#xff09;的样式和设置 0 不设置坐标轴 c1(Bar().add_xaxis([力量,智力,敏捷]).add_yaxis(全能骑士,# 系列名称&#xff0c;用于 tooltip 的显示&#xff0c;legend 的图例筛选。[429,321,296],#系列数据).add_yaxis(猴子,[352,236,4…
阅读更多...
axios快速上手，详细解读

axios快速上手，详细解读

一、axios的理解 1. axios是什么 前端最流行的 ajax 请求库react/vue 官方都推荐使用 axios 发 ajax 请求axios文档 2. axios的特点 基于 xhr promise 的异步 ajax 请求库浏览器端/node 端都可以使用支持请求&#xff0f;响应拦截器支持请求取消请求/响应数据转换批量发送…
阅读更多...
Micropython——使用匿名上位机工作站实现电机参数实时绘图并PID调参

Micropython——使用匿名上位机工作站实现电机参数实时绘图并PID调参

感谢龙哥指导使用如此优秀的上位机调参软件快速实现基于pyb开发的机器人PID参数的调节整定。 匿名工作站上位机简介 【经验篇】匿名上位机4.34简单上手 使用匿名工作站上位机可以快速完成对机器人底盘电机的PID参数整定&#xff0c;而且绘图速度极快&#xff0c;基本无延时&a…
阅读更多...
axios--》axios初步操作

axios--》axios初步操作

目录 初识axios axios常用语法 axios发送get请求 axios发送post请求 axios发送Ajax请求 初识axios axios是一个基于promise的网络请求库&#xff0c;作用于node.js和浏览器中&#xff0c;在服务端它使用原生node.js 的 http 模块&#xff0c;而在客户端(浏览器)则使用 X…
阅读更多...
Axios（万字详细教程）

Axios（万字详细教程）

Axios介绍 1、Axios是什么&#xff1f; Axios是一个基于promise的HTTP库&#xff0c;类似于jQuery的ajax&#xff0c;用于http请求。可以应用于浏览器端和node.js&#xff0c;既可以用于客户端&#xff0c;也可以用于node.js编写的服务端。 2、Axios特性 &#xff08;1&…
阅读更多...
R语言主成分回归（PCR）、 多元线性回归特征降维分析光谱数据和汽车油耗、性能数据...

R语言主成分回归（PCR）、 多元线性回归特征降维分析光谱数据和汽车油耗、性能数据...

原文链接&#xff1a;http://tecdat.cn/?p24152 什么是PCR&#xff1f;&#xff08;PCR PCA MLR&#xff09;&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 • PCR是处理许多 x 变量的回归技术• 给定 Y 和 X 数据&#xff1a;• 在 X 矩阵上进行 PCA– …
阅读更多...
ESL3.5 学习笔记（主成分回归，偏最小二乘回归步骤详解）

ESL3.5 学习笔记（主成分回归，偏最小二乘回归步骤详解）

3.5 运用派生输入方向的方法 这是一篇有关《统计学习基础》&#xff0c;原书名The Elements of Statistical Learning的学习笔记&#xff0c;该书学习难度较高&#xff0c;有很棒的学者将其翻译成中文并放在自己的个人网站上&#xff0c;翻译质量非常高&#xff0c;本博客中有…
阅读更多...
R语言高维数据惩罚回归方法：主成分回归PCR、岭回归、lasso、弹性网络elastic net分析基因数据

R语言高维数据惩罚回归方法：主成分回归PCR、岭回归、lasso、弹性网络elastic net分析基因数据

最近我们被客户要求撰写关于高维数据惩罚回归的研究报告&#xff0c;包括一些图形和统计输出。 主成分分析PCA降维方法和R语言分析葡萄酒可视化实例 主成分分析PCA降维方法和R语言分析葡萄酒可视化实例 &#xff0c;时长04:30 1 介绍 在本文中&#xff0c;我们将研究以下主题…
阅读更多...
回归预测 | MATLAB实现PCR(主成分回归)多输入单输出

回归预测 | MATLAB实现PCR(主成分回归)多输入单输出

回归预测 | MATLAB实现PCR(主成分回归)多输入单输出（PCA Regression） MATLAB实现数据降维的PCA(主成分分析)函数有pca和pcacov两个。 pca函数可以直接利用原始数据进行主成分分析； pcacov函数针对原始数据的协方差矩阵进行主成分分析,本程序实现了两种分析方法的预测结果对比…
阅读更多...
Python数据分析案例22——财经新闻可信度分析(线性回归，主成分回归，随机森林回归)

Python数据分析案例22——财经新闻可信度分析(线性回归，主成分回归，随机森林回归)

本次案例还是适合人文社科领域&#xff0c;金融或者新闻专业。本科生做线性回归和主成分回归就够了&#xff0c;研究生还可以加随机森林回归&#xff0c;其方法足够人文社科领域的硕士毕业论文了。 案例背景 有八个自变量&#xff0c;[微博平台可信度,专业性,可信赖性,转发量,…
阅读更多...
matlab实现主成分回归

matlab实现主成分回归

主成分回归就是先对数据进行主成分分析&#xff0c;再进行多元线性回归。 主成分分析参考上篇博客&#xff0c;蹦篇博客介绍多元线性回归及其MATLAB实现。 多元线性回归是一种常用的线性建模方法。如果有两个或两个以上的自变量&#xff0c;就称为多元回归。事实上&#xff0c;…
阅读更多...
推荐文章

Copyright @ 2022~2023