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
第二种方式:
axios({
method:"get", // 请求的方式
url:"地址", // url 地址
params:{id:1} // 仅限 get 方式像后台传输的数据
}).then(function(result){
console.log(result) // 请求成功的函数
}).catch(function(error){
console.log(error) // 请求失败的函数
})
第三种方式(第一种与第二种的结合版):创建实例的方式,也是用的最多的方式,可以用来处理很多的请求数据的操作,且是按顺序请求的
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) // 这个代表第二个实例获取的数据
}))
案例: