VUE的axios的详细介绍和用法

article/2025/9/20 20:18:52

Vue中发送网络请求有非常多的方式, 那么, 在开发中, 我们该如何选择呢?

选择一: 传统的Ajax是基于XMLHttpRequest(XHR)

为什么不用它呢?

  1. 非常好解释, 配置和调用方式等非常混乱.
  2. 编码起来看起来就非常蛋疼.

所以真实开发中很少直接使用, 而是使用jQuery-Ajax

选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax

相对于传统的Ajax非常好用.

那我们为什么不选择它呢?

首先, 我们先明确一点: 现在，在Vue的整个开发中都是不需要使用jQuery了。
那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 你觉得合理吗?
jQuery的代码要1w+行，而Vue的代码才1w+行.引用用这个框架反而使得我们的项目更加臃肿。
所以完全没有必要为了用网络请求就引用这个重量级的框架。

选择三: 官方在Vue1.x的时候, 推出了Vue-resource

Vue-resource的体积相对于jQuery小很多.
另外Vue-resource是官方推出的.

那我们为什么不选择它呢?

在Vue2.0推出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource, 并且以后也不会再更新.
那么意味着以后vue-reource不再支持新的版本时, 也不会再继续更新和维护。对以后的项目开发和维护都存在很大的隐患。所以我们不引用它

选择四: 在说明不再继续更新和维护vue-resource的同时, 作者还推荐了一个框架: axios

axios有非常多的优点, 并且用起来也非常方便.
稍后, 我们对他详细学习.

jsonp

在前端开发中, 我们一种常见的网络请求方式就是JSONP
使用JSONP最主要的原因往往是为了解决跨域访问的问题.

JSONP的原理是什么呢?

JSONP的核心在于通过<script>标签的src来帮助我们请求数据。原因是我们的项目部署在domain1.com服务器上时, 是不能直接访问domain2.com服务器上的资料的，会产生跨域问题。
这个时候, 我们利用<script>标签的src帮助我们去服务器请求到数据, 将数据当做一个javascript的函数来执行, 并且执行的过程中传入我们需要的json。
所以, 封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称.

JSONP如何封装呢?

我们一起自己来封装一个处理JSONP的代码吧.
代码演示：
在这里插入图片描述
在这里插入图片描述

那我们为什么选择axios? 作者的推荐和功能上的特点

功能特点:

  • 可以在浏览器中发送 XMLHttpRequests 请求
  • 可以在 node.js 中发送 http请求
  • 支持 Promise API
  • 可以拦截请求和响应
  • 可以转换请求和响应数据

支持多种请求方式:

  • axios(config)
  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

发送get请求演示：

在这里插入图片描述

发送并发请求

有时候, 我们可能需求同时发送两个请求，使用axios.all, 可以放入多个请求的数组.
axios.all([]) 返回的结果是一个数组，使用 axios.spread可将数组 [res1,res2] 展开为 res1, res2

在这里插入图片描述

全局配置

在上面的示例中, 我们的BaseURL是固定的，事实上, 在开发中可能很多参数都是固定的。这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

axios.defaults.baseURL = ‘123.207.32.32:8000’
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

代码演示：
在这里插入图片描述

常见的配置选项

  • 请求地址：url: ‘/user’,
  • 请求类型 ：method: ‘get’,
  • 请根路径：baseURL: ‘http://www.mt.com/api’,
  • 请求前的数据处理：transformRequest:[function(data){}],
  • 请求后的数据处理：transformResponse: [function(data){}],
  • 自定义的请求头：headers:{‘x-Requested-With’:‘XMLHttpRequest’},
  • URL查询对象：params:{ id: 12 },
  • 查询对象序列化函数：paramsSerializer: function(params){ } request body data: { key: ‘aa’},
  • 超时设置s：timeout: 1000,
  • 跨域是否带Token：withCredentials: false,
  • 自定义请求处理：adapter: function(resolve, reject, config){},
  • 身份验证信息：auth: { uname: ‘’, pwd: ‘12’},
  • 响应的数据格式 ：json / blob /document /arraybuffer / text / stream responseType: ‘json’,

axios的实例

为什么要创建axios的实例呢?

当我们从axios模块中导入对象时, 使用的实例是默认的实例。当给该实例设置一些默认配置时, 这些配置就被固定下来了。但是后续开发中, 某些配置可能会不太一样。比如某些请求需要使用特定的baseURL或者timeout或者content-Type等。这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

代码演示：
在这里插入图片描述
在这里插入图片描述

我对axios的解耦封装
在这里插入图片描述

如何使用拦截器？

代码演示：
在这里插入图片描述
在这里插入图片描述

请求拦截可以做到的事情：

在这里插入图片描述

请求拦截中错误拦截较少，通常都是配置相关的拦截,
可能的错误比如请求超时，可以将页面跳转到一个错误页面中。
响应的成功拦截中，主要是对数据进行过滤。

在这里插入图片描述
在这里插入图片描述
响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。

在这里插入图片描述

最新的axois的新增配置

  • List itemaxios.defaults.baseURL = “url”
    (配置完成后，就不需要在请求里传入“URL”地址)
  • axios.defaults.timeout = 时间
  • axios.defaults.headers={ }

在开发中，有时候我们需要根据不同的环境设置不同的环境变量，常见的有三种环境：

  • 开发环境：development；
  • 生产环境：production；
  • 测试环境：test；

如何区分环境变量呢？常见有三种方式：**

方式一：手动修改不同的变量；

方式二：根据process.env.NODE_ENV的值进行区分；

let BASE_URL=""
Let BASE_ NAME=""
if(process.env.NODE_ ENV ==='development') {
BASE URL = 'URL'
BASE_ NAME =''
} else if (process.env .NODE ENV === 'production') {
BASE URL = 'URL'
BASE_ NAME =''
}else if (process.env .NODE ENV === 'test') {
BASE URL = 'URL'
BASE_ NAME =''
}
export {BASE_URL,BASSE_NAME}

方式三：编写不同的环境变量配置文件

在根目录下创建 “.env.test”, “.env.prodiction”, ".env.development"文件

文件里面写
VUE_APP_BASE_URL = URL(对应的URL)
VUE_APP_BASEA_NAME = name（对应的名字）、

使用的时候用法：process.env.VUE_APP_BASE_URL
process.env.VUE_APP_BASE_NAME


http://chatgpt.dhexx.cn/article/9FnGDd1m.shtml

相关文章

AJAX，Axio异步框架（对原生AJAX封装）。web分区

AJAX，Axio异步框架（对原生AJAX封装）。web分区

1.Ajax的理解 以前服务器里的数据&#xff0c;都是存在Servlet域里&#xff0c;然后发给JSP&#xff0c;来进行显示。 有了AJAX&#xff0c;可以和服务器通信。不需要JSP作页面。 可以在Servlet把数据发给浏览器&#xff0c;然后在HTML页面显示。 1.1 以前的方法 1.2 现在的方…
阅读更多...
类方法和对象方法的区别

类方法和对象方法的区别

类方法和对象方法 1.类方法属于本类的方法&#xff0c;不会因创建对象的不同而改变&#xff0c;类方法随着类的字节码文件加载而加载&#xff1b; 2.对象方法属于当前类创建的某个对象&#xff0c;会随着创建对象的不同而改变。如下图所示代码&#xff1a;
阅读更多...
python中什么叫类、什么叫对象_Python中的类和对象是什么

python中什么叫类、什么叫对象_Python中的类和对象是什么

一、面向过程和面向对象 面向过程：根据业务逻辑从上到下写代码。 面向对象：将数据与函数绑定到一起，进行封装，这样能够更快速的开发程序，减少了重复代码的重写过程。 二、类和对象 1、类的概念 面向对象编程的2个非常重要的概念：类和对象是面向对象编程的核心。 在使用对…
阅读更多...
类与对象的区别？

类与对象的区别？

对于初学者来说&#xff0c;类与对象之间的关系的非常模糊不清的&#xff0c;在这里跟大家分享一下&#xff0c;让初学者有所帮助。 一、类的概念&#xff1a; 类是具有相同属性和服务的一组对象的集合。它为属于该类的所有对象提供了统一的抽象描述&#xff0c;其内部包括属性…
阅读更多...
Java类和对象 详解（一）

Java类和对象 详解（一）

一、面向对象简述 面向对象是一种现在最为流行的程序设计方法&#xff0c;几乎现在的所有应用都以面向对象为主了&#xff0c;最早的面向对象的概念实际上是由IBM提出的&#xff0c;在70年代的Smaltalk语言之中进行了应用&#xff0c;后来根据面向对象的设计思路&#xff0c;才…
阅读更多...
C++类和对象详细总结

C++类和对象详细总结

目录 目录 类与对象概念 什么是对象 什么是类 什么是方法&#xff1a; 自定义类型&#xff08;类的关键字&#xff1a;class&#xff09; 定义类的格式 封装 类的特性 访问权限以及访问限定符 struct 定义的类和class定义的类的区别&#xff1a; 小结 对象中包含了…
阅读更多...
C++类和对象详解

C++类和对象详解

类与对象上篇&#xff1a; 主要内容&#xff1a; 1.类和对象的区别。 2.类的定义。 3.类的访问限定符和封装 4.类的作用域 5.类的实例化&#xff08;用类类型创建对象&#xff09; 6.计算类对象的大小 7.this指针 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析…
阅读更多...
面向过程和面向对象区别

面向过程和面向对象区别

&#xff08;1&#xff09;从设计思路来看。 面向过程&#xff1a;程序设计的重点是分析解决问题的步骤&#xff0c;以及完成步骤的流程&#xff0c;是一种结构化自上而下的程序设计方法。面向对象&#xff1a;程序设计的重点是把构成问题的事物分解成对象&#xff0c;从局部着…
阅读更多...
Java基础——类和对象

Java基础——类和对象

目录 一、类和对象的基本概念 二、类与对象的定义与使用 1.创建类的语法&#xff1a; 2. 创建具体的对象&#xff1a; 3.范例&#xff08;创建一个Person 类的对象&#xff09; 三、static关键字 &#xff08;一&#xff09;static修饰属性&#xff08;类属性、类变量&a…
阅读更多...
类，对象，方法与函数的区别

类，对象，方法与函数的区别

面向对象&#xff08;Object oriented Programming&#xff0c;OOP)编程 的思想主要是针对大型软件设计而来的。面向对象编程将数据和操作数据相关的方法封装到对象中&#xff0c;组织代码和数据的方式更加接近人的思维&#xff0c;使程序的扩展性更强、可读性更好&#xff0c;…
阅读更多...
C++的类和对象

C++的类和对象

目录 C面向对象的三大特性&#xff1a;封装、继承、多态 封装 构造函数和析构函数 构造函数的分类与调用 深拷贝与浅拷贝 类对象作为类成员 静态成员 成员变量和成员函数是分开存储的 const修饰成员函数 友元 运算符重载 继承 多态 C面向对象的三大特性&#xff1…
阅读更多...
java实例和对象对象的区别_java中实例与对象的区别和联系

java实例和对象对象的区别_java中实例与对象的区别和联系

对象是抽象的说法&#xff0c;你可以把它看作一个符合它自身定义的所有实例的代表&#xff0c;而实例则是对象的现实体现。 你可以说一个实例是一个对象&#xff0c;但你不能说一个对象是一个实例。因为定义对象时只是把自身的规则和逻辑定义好&#xff0c;实例可以通过输入不同…
阅读更多...
怎么来理解java类和对象的区别

怎么来理解java类和对象的区别

对象在需求中的使用 在具体问题中如何使用面向对象去分析问题&#xff0c;和如何使用面向对象。 以把大象装冰箱为例进行分析&#xff1a;在针对具体的需求&#xff0c;可以使用名词提炼的办法进行分析&#xff0c;寻找具体的对象。 需求&#xff1a;把大象装冰箱里 对象&…
阅读更多...
C++类对象和类指针的区别

C++类对象和类指针的区别

好奇这个&#xff0c;所以参考了一些帖子&#xff0c;写下心得。 一篇转载率较高的帖子&#xff1a;C 类对象和 指针的区别 大佬都不贴结果。。。。所以这里我给出代码和结果&#xff1a; #include<iostream> using namespace std;class Test{ public:int a;Test(){a …
阅读更多...
Java中类和对象的区别

Java中类和对象的区别

一、类和对象 1、类 类的理解 类是对现实生活中一类具有共同属性和行为的事物的抽象类是对象的数据类型&#xff0c;类是具有相同属性和行为的一组对象的集合简单理解&#xff1a;类就是对现实事物的一种描述 类的组成 属性&#xff1a;指事物的特征&#xff0c;例如&#xff…
阅读更多...
安装svn 汉化包 也不能设置中文

安装svn 汉化包 也不能设置中文

(以下为亲测!) 汉化包地址:https://osdn.net/projects/tortoisesvn/storage 进入地址之后:选择对应版本-->>Language Packs-->>选择中文包 问题: 已经安装svn汉化包,但是不能设置为中文. 解决: 确保汉化包版本对应svn版本.如果汉化包版本已经对应svn版本,则把…
阅读更多...
SVN汉化失败的原因及解决方案（通过SVN官网下载SVN和相应的汉化包）

SVN汉化失败的原因及解决方案（通过SVN官网下载SVN和相应的汉化包）

1、没删除SVN根目录语言包里的所有文件 2、汉化包没放在SVN根目录的语言文件夹下安装 3、SVN版本和汉化包版本不一致 首先看自己电脑上安装的svn是什么版本&#xff1a; 比如我的就是 TortoiseSVN 1.11.1&#xff0c;那我就要找TortoiseSVN 1.11.1对应的TortoiseSVN 1.11.1l…
阅读更多...
Tortoise SVN 汉化（官网下载汉化包）

Tortoise SVN 汉化（官网下载汉化包）

&#xff08;本操作是已经下载Tortoise SVN后 &#xff0c;通过官网下载汉化包进行的操作&#xff09; 1、首先进入到官网 https://tortoisesvn.net/downloads.html 2、进入到官网首页&#xff0c;点击Translations 3、进入到翻译页面&#xff0c;点击download 4、进入到下…
阅读更多...
window eclipse快速导入svn项目以及软件汉化

window eclipse快速导入svn项目以及软件汉化

刚入职新公司&#xff0c;之前几家公司使用得IDE跟代码管理是idea跟gitlab,公司内sap/erp系统&#xff0c;立项时间较早&#xff0c;使用得是eclipsesvn。 进行导入项目之前&#xff0c;英语水平较差得得同学&#xff0c;可以将软件先进行快速汉化 1、如图 2、在弹出得输入框中…
阅读更多...
关于svn汉化包安装无效的解决办法

关于svn汉化包安装无效的解决办法

下载svn汉化包要和对应的svn客户端版本对应&#xff0c;否则安装无效&#xff0c; 在安装前要想将svn安装目录下的languages目录下的文件全部删除 还有一点要注意的是 汉化包安装要放在svn安装目录下进行安装&#xff0c;它才能正常汉化 安装完后就可以选择语言了
阅读更多...
推荐文章

Copyright @ 2022~2023