【Vue实战教程】之Vue项目中的异步请求

Vue的异步请求

1 axios的安装与使用

Axios是一个基于promise的HTTP库,主要用来向服务端发起请求,可以在请求中做更多可控的操作,例如拦截请求等。
Axios可以使用在浏览器和node.js中,Vue、React等前端框架的广泛普及,促使了axios这种轻量级库的出现。
Axios的特性:

  • 可以在浏览器中发送 XMLHttpRequests
  • 可以在 node.js 发送 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 能够取消请求
  • 自动转换 JSON 数据
  • 客户端支持保护安全免受 XSRF 攻击
1.1 安装axios

安装命令如下:

npm install axios --save

打开使用vue脚手架创建的项目,在main.js文件中引入axios模块,代码如下:

import axios from 'axios’;
Vue.prototype.$axios = axios;

在组件中使用axios发送异步请求,代码如下:

<script>
export default {
mounted(){
this.$axios.get('/user?id=123').then(res=>{
console.log(res.data);
})
}
}
</script>
1.2 axios基本用法

Axios主要的作用是向服务端发起HTTP请求,根据 HTTP 标准,HTTP 请求可以使用多种请求方法。
为了在开发中能够更方便的使用axios,为所有支持的请求方法提供了别名。

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

注意 在使用别名方法时, url、method、data 这些属性都不必在配置中指定。

GET请求

GET请求用于获取数据,从指定的资源请求数据,并返回实体主体。代码如下:

// 方法一
this.$axios.get('/url',{
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})// 方法二
this.$axios({
method: 'get',
url: '/url',
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})

POST请求

POST请求是向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。
POST请求一般分为两种类型:

  • form-data 表单提交,图片上传、文件上传时用该类型比较多
  • application/json 一般是用于 ajax 异步请求

代码如下:

this.$axios.post('/url',{
id:1
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})

PUT请求

PUT请求用于更新数据,从客户端向服务器传送的数据取代指定的文档的内容。代码如下:

this.$axios.put('/url',{
id:1
}).then(res=>{
console.log(res.data);
})

PATCH请求

PATCH请求也是用于更新数据,是对put方法的补充,用来对已知资源进行局部更新。代码如下:

//patch请求
this.$axios.patch('/url',{
id:1
}).then(res=>{
console.log(res.data);
})

DELETE请求

DELETE是请求服务器删除指定的页面。使用axios发送DELETE请求,参数可以使用明文的方式或者是封装为对象进行提交。代码如下:

// 参数以明文方式提交
this.$axios.delete('/url',{
params: {
id:1
}
}).then(res=>{
console.log(res.data);
})// 参数以封装对象方式提交
this.$axios.delete('/url',{
data: {
id:1
}
}).then(res=>{
console.log(res.data);
})

2 axios实例

当axios要请求多个不同的后端接口地址,并且一些axios配置项都相同时,可以先创建axios实例,然后使用axios实例发起请求。
可以使用自定义配置新建一个 axios 实例。代码如下:

let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
});instance.get('/query').then(res=>{
console.log(res.data);
});

在一个Vue组件中可以同时创建多个axios实例。
Axios实例常用配置:

  • baseURL 请求的域名基本地址,类型:String;
  • timeout 请求超时时长,单位ms,类型:Number;
  • url 请求路径,类型:String;
  • method 请求方法,类型:String;
  • headers 设置请求头,类型:Object;
  • params 请求参数,将参数拼接在URL上,类型:Object;
  • data 请求参数,将参数放到请求体中,类型:Object;

axios全局配置

代码如下:

//配置全局的超时时长
this.$axios.defaults.timeout = 2000;//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

axios实例配置

代码如下:

let instance = this.$axios.create();
instance.defaults.timeout = 3000;

axios请求配置

代码如下:

this.$axios.get('/query',{
timeout: 3000
}).then();

以上配置的优先级为:请求配置 > 实例配置 > 全局配置

3 axios并发请求

Axios提供了并发请求的方法,可以同时进行多个请求,并统一处理返回值。代码如下:

this.$axios.all([
this.$axios.get('/query/classify'),
this.$axios.get('/query/goods')
]).then(
this.$axios.spread((classifyRes,goodsRes)=>{
console.log(classifyRes.data);
console.log(goodsRes.data);
})
)

4 axios拦截器

Axios提供了拦截器的功能,使用拦截器可以提高请求的可控性,并且完成更多复杂的操作。Axios的拦截器分为请求拦截器和响应拦截器,两种拦截器在不同的时机对axios发起的请求进行处理。

请求拦截器

在请求被 then 或 catch 处理前拦截它们。代码如下:

this.$axios.interceptors.request.use(config=>{
// 发生请求前的处理
return config;
},err=>{
// 请求错误处理
return Promise.reject(err);
});//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
return config
});

响应拦截器

在响应被 then 或 catch 处理前拦截它们。代码如下:

this.$axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
//该返回对象会传到请求方法的响应对象中
return res 
},err=>{
// 响应错误处理
return Promise.reject(err);
});

取消拦截

如果你想在稍后移除拦截器,可以设置取消拦截,代码如下:

let instance = this.$axios.interceptors.request.use(config=>{/*...*/});//取消拦截
this.$axios.interceptors.request.eject(instance);

5 axios错误处理

Axios请求拦截器和响应拦截器抛出错误时,返回的err对象会传给catch()函数的err对象参数。代码如下:

this.$axios.get('/url').then(res=>{// 获取响应数据
}).catch(err=>{
// 错误处理
console.log(err);
});

6 axios取消请求处理

axios取消请求主要用于取消正在进行的http请求。代码如下:

let source = this.$axios.CancelToken.source();this.$axios.get('/goods.json',{
cancelToken: source.token
}).then(res=>{
console.log(res)
}).catch(err=>{
//取消请求后会执行该方法
console.log(err)
});//取消请求,参数可选,该参数信息会发送到请求的catch中
source.cancel('取消后的信息');

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

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

相关文章

C++ 列式内存布局数据存储格式 Arrow

Apache Arrow 优点 : 高性能数据处理&#xff1a; Arrow 使用列式内存布局&#xff0c;这特别适合于数据分析和查询操作&#xff0c;因为它允许对数据进行高效批量处理&#xff0c;减少CPU缓存未命中&#xff0c;从而提升处理速度。 零拷贝数据共享&#xff1a; Arrow …

【YashanDB知识库】yasdb jdbc驱动集成druid连接池,业务(java)日志中有token IDENTIFIER start异常

问题现象 客户的java日志中有如下异常信息&#xff1a; 问题的风险及影响 对正常的业务流程无影响&#xff0c;但是影响druid的merge sql功能&#xff08;此功能会将sql语句中的字面量替换为绑定变量&#xff0c;然后将替换以后的sql视为同一个&#xff0c;然后用做执行性能统…

Vue3扁平化Tree组件的前端分页实现

大家好&#xff0c;我是小卷。得益于JuanTree的扁平化设计&#xff0c;在数据量很大的情况下除了懒加载&#xff0c;使用前端分页也是一种解决渲染性能问题的可选方案。 用法 要实现的文档&#xff1a; 分页效果&#xff1a; 实现 新增属性&#xff1a; 组件setup方法中新增…

程序员加班现象:成因、影响与应对策略

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 加班的成因 加班的影响 应对策略 结语 我的其他博客 前言 在现代科技行业中&#xff0c;加班现象已成为一个普遍存在的问题…

proxy是什么,vue3是怎么使用proxy的

Vue 3 使用了 Proxy 作为其响应式系统的基础&#xff0c;这是因为 Proxy 提供了一种更为强大和灵活的方式来实现对象和数组的响应式特性。下面是 Proxy 的一些关键特性以及它们是如何在 Vue 3 中体现并提升响应式性能的&#xff1a; 什么是 Proxy&#xff1f; Proxy 是 ES6 中…

配置sublime的中的C++编译器(.sublime-build),实现C++20

GCC 4.8: 支持 C11 (部分) GCC 4.9: 支持 C11 和 C14 (部分) GCC 5: 完全支持 C14 GCC 6: 支持 C14 和 C17 (部分) GCC 7: 支持 C17 (大部分) GCC 8: 完全支持 C17&#xff0c;部分支持 C20 GCC 9: 支持更多的 C20 特性 GCC 10: 支持大部分 C20 特性 GCC 11: 更全面地支持 C20 …

Android 线程池的面试题 线程线程池面试题

1.为什么要用线程池 降低资源消耗&#xff1a;通过复用线程&#xff0c;降低创建和销毁线程的损耗。 提高响应速度&#xff1a;任务不需要等待线程创建就能立即执行。 提高线程的可管理性&#xff1a;使用线程池可以进行统一的分配、调优和监控。 2. 线程池执行流程&#xff08…

ES中的数据类型学习之ARRAY

Arrays | Elasticsearch Guide [7.17] | Elastic 中文翻译 &#xff1a;Array Elasticsearch 5.4 中文文档 看云 Arrays In Elasticsearch, there is no dedicated array data type. Any field can contain zero or more values by default, however, all values in the a…

SpringBoot 自动配置原理

一、Condition Condition 是在 Spring 4.0 增加的条件判断功能&#xff0c;通过这个可以功能可以实现选择性的创建 Bean 操 作。 思考&#xff1a; SpringBoot 是如何知道要创建哪个 Bean 的&#xff1f;比如 SpringBoot 是如何知道要创建 RedisTemplate 的&#xff1f; …

mysql的B+树索引结构介绍

一、B树 特性&#xff1a; 所有的叶子结点中包含了全部关键字的信息&#xff0c;非叶子节点只存储键值信息&#xff0c;及指向含有这些关键字记录的指针&#xff0c;且叶子结点本身依关键字的大小自小而大的顺序链接&#xff0c;所有的非终端结点可以看成是索引部分&#xff0…

MySQL数据库基本用法

了解数据库基本概念 什么是数据库&#xff1f; • 长期存放在计算机内&#xff0c;有组织、可共享的大量数据的集合&#xff0c;是一个数据“仓库” MySQL数据库的特点 • 开源免费&#xff0c;小巧但功能齐全 • 可在Windows和Linux系统上运行 • 操作方便&#xff0c;…

Hive 的 classpath 简介

Hive的classpath是Hive运行时用于查找所需类和资源文件的路径集合。它包含了Hive运行所需的所有JAR文件和配置文件的位置。理解和管理Hive的classpath对于确保Hive正常运行、添加自定义库或解决类加载问题非常重要。 以下是关于Hive classpath的一些关键点&#xff1a; 默认位…

昇思25天学习打卡营第22天|munger85

LSTMCRF序列标注 我们希望得到这个模型来对词进行标注&#xff0c;B是开始&#xff0c;I是实体词的非开始&#xff0c;O是非实体词。 我们首先需要lstm对序列里token的记忆&#xff0c;和计算每个token发到crf的分数&#xff0c;发完了再退出来&#xff0c;最后形成1模型。那么…

Python主页

文章目录 Python全套内容整理 Python全套内容整理 杂项 代码风格 Python之禅命名规范 基础语法 数值运算赋值判断循环函数 参数(*args、**krags、\、*) 包 import 基础类 字符串 str类方法 列表元组字典集合 集合速览 进阶功能 异常文件类 常见模块 ossys 常见模块&#xf…

免费可视化工具大显身手:公司财务报表一键生成

面对海量的财务数据&#xff0c;如何快速、准确地提炼出有价值的信息&#xff0c;并以直观易懂的方式呈现给管理层及利益相关者&#xff0c;成为了每一家企业面临的重大挑战。 传统财务报表编制过程繁琐&#xff0c;不仅耗时耗力&#xff0c;还容易出错。而一些可视化工具&…

Web服务统一身份认证协议设计与实现

Web服务统一身份认证协议设计与实现 “Design and Implementation of Unified Web Service Authentication Protocol” 完整下载链接:Web服务统一身份认证协议设计与实现 文章目录 Web服务统一身份认证协议设计与实现摘要第一章 绪论1.1 研究背景1.2 研究目的和意义1.3 研究内…

Java学习笔记(四)控制流程语句、循环、跳转控制语句

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍Java控制流程语句、循环、跳转控制语句使用以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题…

Java多线线程-----等待唤醒机制(wait notify)

目录 一.等待唤醒机制简介&#xff1a; 二.synchronized,wait(),notify(): 三.等待唤醒机制案例: 例题一&#xff1a; 例题二&#xff1a; 四.什么时候释放锁—wait&#xff08;&#xff09;、notify&#xff08;&#xff09; 一.等待唤醒机制简介&#xff1a; 由于线程之…

华为嵌入式面试题及参考答案(持续更新)

目录 详细讲TCP/IP协议的层数 材料硬度由什么决定? SD3.0接口电压标准 晶振市场失效率 RS232-C的硬件接口组成 详细讲眼图的功能 局域网传输介质有哪几类? 详细讲OSI模型 NMOS与PMOS的区别 I2C和SPI的区别 Static在C语言中的用法 堆栈和队列的区别 数组的时间复…

pyqt5制作音乐播放器(第三版)

这次接入了数据库&#xff0c;增加了翻页模式&#xff0c;更新了功能跳转之间的细节 数据设计&#xff1a; 收藏 like1时表示被收藏&#xff0c;展示show0的时候表示表数据被搜索 from peewee import Model, PrimaryKeyField, CharField, BooleanField, MySQLDatabase,Integer…