axios 的用法解析
axios 的非常好的请求数据方式,利用了 promise 的方式来进行的操作
首先 promise 是非常好的处理 异步请求的方式,且拥有高并发请求的能力
并发请求:出现大量的异步请求后,一起处理
axios 的基本用法
下载:npm i axios -S
引入:import axios from "axios"
第一种方式:
get 的请求方式:
axios.get('地址',params:{id:1}).then(function(result){ // params:{} 里面存放向后台发送的数据
console.log(result) // 成功的回调函数
}).catch(function(error){
console.log(error) // 失败的回调函数
})
post 的请求方式
axios.post('地址',{id:1}).then(function(result){ // {id:1} 就是要发送的数据,与 get 的方式有些差别, 且发送过去的数据到后台 是 json 的格式,并不是传统的表单格式
console.log(result) // 成功的回调函数
}).catch(function(error){
console.log(error) // 失败的回调函数
})
axios 是用 promise 封装的一个 ajax
第二种方式:
get 方式
axios({
method:"get", // 请求的方式
url:"地址", // url 地址
params:{id:1} // 仅限 get 方式像后台传输的数据
}).then(function(result){
console.log(result) // 请求成功的函数
}).catch(function(error){
console.log(error) // 请求失败的函数
})
post 方式
axios({
method:"post",
url:"地址",
data:{}, // 传递的数据,在这里我们注意以下,我们传递的数据是 json 格式,传统的 ajax 传递的数据是 字符串的格式,user=blue&age=20,所以冲突
data:Qs.stringify({}) // 像这种写法,我们将会以传统的表单形式向后台发送数据, 下面会讲解 qs ,两种 data 二选一
}).then(res=>{
console.log(res)
})
解决方法,我们需要在 引入 qs 的插件,利用 npm 下载的 axios 里面自带了 qs 的插件无需下载;
使用方法:
import Qs from "qs";
在 data 中使用 Qs.stringify() // 这个里面传入数据即可成为 字符串格式,不这样写便是 json 格式
第三种方式(第一种与第二种的结合版):创建实例的方式,也是用的最多的方式,可以用来处理很多的请求数据的操作,且是按顺序请求的
var instance = axios.create({ // 创建一个实例
baseURL:"", // 代表一个公共的地址,主要是 http 域名 端口,一致的东西,可以放在这里
timeout:1000 // 超过时间中断
});
axios.all([
instance({ // 第一个实例
url:"", // 代表公共地址后面的地址
method:"" // 代表请求的方式
}),
instance({ // 第二个实例
url:"", // 代表公共地址后面的地址
method:"" // 代表请求的方式
})
]).then(axios.spread(function(res1,res2){ // axios.spread() 相当于结构赋值,让 res1 代表了 第一个实例获取的数据,res2 代表了第二个获取实例的数据
console.log(res1) // 这个代表第一个实例获取的数据
console.log(res2) // 这个代表第二个实例获取的数据
}))
案例:
axios 的用法解析的更多相关文章
- extern "c"用法解析
转自: extern "c"用法解析 - 简书 引言 C++保留了一部分过程式语言的特点,因而它可以定义不属于任何类的全局变量和函数.但是,C++毕竟是一种面向对象的程序设计语言, ...
- WordPress的have_posts()和the_post()用法解析
原文地址:http://www.phpvar.com/archives/2316.html 网上找到一篇介绍WordPress的have_posts()和the_post()用法解析的文章,觉得不错! ...
- extern "C" 用法解析
extern "c"用法解析 作者 作者Jason Ding ,链接http://www.jianshu.com/p/5d2eeeb93590 引言 C++保留了一部分过程式语言的 ...
- mysql group by 用法解析(详细)
在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提供 有distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是用它来返回不重记录的 ...
- (转载)mysql group by 用法解析(详细)
(转载)http://blog.tianya.cn/blogger/post_read.asp?BlogID=4221189&PostID=47881614 mysql distinct 去重 ...
- group by 用法解析
group by 用法解析 group by语法可以根据给定数据列的每个成员对查询结果进行分组统计,最终得到一个分组汇总表. SELECT子句中的列名必须为分组列或列函数.列函数对于GROUP BY子 ...
- sql中的group by 和 having 用法解析
转载博客:http://www.cnblogs.com/wang-123/archive/2012/01/05/2312676.html --sql中的group by 用法解析:-- Group B ...
- C/C++之extern "C"的用法解析
extern "C"的用法解析 http://blog.sina.com.cn/u/494a1ebc010004g5 C++中extern “C”含义深层探索 1.引言 C++语言 ...
- ZT extern "C"的用法解析
extern "C"的用法解析 1.引言 C++语言的创建初衷是“a better C”,但是这并不意味着C++中类似C语言的全局变量和函数所采用的编译和连接方式与C语言完全相同. ...
随机推荐
- Centos7:配置防火墙
firewalld的基本使用 启动: systemctl start firewalld 关闭:systemctl stop firewalld 查看状态: systemctl status fire ...
- 多线程编程-- part 4 线程间的通信
线程间的相互作用 线程之间需要一些协调通信,来共同完成一件任务. Object类相关的方法:notify(),notifyAll(),wait().会被所有的类继承,这些方法是final不能被重写.他 ...
- 手把手教你查看网站遭受到的Web应用攻击类型
常见Web应用攻击类型有:webshell.SQL注入.文件包含.CC攻击.XSS跨站脚本攻击.敏感文件访问.远程命令.恶意扫描.代码执行.恶意采集.特殊攻击.其他攻击十二种攻击类型. 如何查看网站遭 ...
- DedeAMPZ 网吧能安装却不能打开网站
只需把 监听IP的连接里的 LMHOSTS查询 禁用就行了. 方法: 连接属性-->TCP/IP 协议属性-->WINS 选项卡-->去掉 启用 LMHOSTS查询 前面的勾. by ...
- c++ 实时通信系统(c++socket篇)
在上一篇简单的介绍了TCP/IP协议,在这一篇我们主要介绍socket的具体实现的函数 第一步首先我们套添加上头文件:(#pragma comment(lib, "WS2_32") ...
- Powershell - 获取服务器启动时间
www.orangeisland.cn 使用以下命令,直接获取服务器启动时间: 通过以下脚本,批量获取服务器的启动时间: $TextPath = "C:\Users\admin\Deskto ...
- 19.8.8 flutter 学习之创建第一个可变的Widget
创建一个很简单的可变的Widget 效果就是点击字的时候会变化 完整代码: class CarPage extends StatefulWidget { @override _CarState cre ...
- Kendo UI for jQuery自定义小部件第一弹!不得不看的入门指南
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- c3p0连接池:com.mysql.cj.exceptions.InvalidConnectionAttributeException
1 遇到的错误com.mysql.cj.exceptions.InvalidConnectionAttributeException: 四月 17, 2019 10:21:13 上午 com.mcha ...
- h5css3_01
一.什么是 HTML5 HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新版本的 HTML 语 ...