为什么选择axios?
最重要的一个原因是,vue的作者推荐使用,再一个这个框架配合vue确实很棒!功能特点:在浏览器中发送XMLHttpRequests请求在node.js中发送http请求支持Promise API拦截请求和响应转换请求和响应数据支持多种请求方式:axios(config)axios.request(config)axios.get(url, [, config])axios.delete(url,
·
最重要的一个原因是,vue的作者推荐使用,再一个这个框架配合vue确实很棒!
功能特点:
- 在浏览器中发送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请求
const homeUrl = 'http://123.207.32.32:8000/home/multidata'
axios({
url: homeUrl,
method: 'get', // 这里如果不定义则默认为get请求
}).then(res => {
console.log(res);
})
- 专门针对get请求拼接url?后边的参数,传入params:{}
axios({
url: https://store.crmeb.net/api/pc/get_category_product,
method: 'get',
// 专门针对get请求拼接url?后边的参数
params: {
page: 1,
limit: 3,
}
}).then(res => {
console.log(res.data);
})
并发请求
开发过程中,同时发送两个请求,并且请求的数据一起到达后,再继续后续的工作的方式叫做并发请求,也就是一次请求多个接口(个人理解!)
axios并发请求, 使用all方法,all方法要求传入的是一个数组,每个数组的值可以为一次请求,之后在all方法外层直接.then()即可合并两次请求,返回的结果为一个数组
axios.all([
axios({
url: 'https://store.crmeb.net/api/pc/get_products',
params: {
page: 1,
limit: 20,
cid: 57,
sid: 0,
priceOrder: '',
news: 0,
}
}),
axios({
url: 'https://store.crmeb.net/api/pc/get_company_info',
})
]).then(results => {
console.log(results)
})
如果你想自动把这个数组展开的话在then()
方法中传入axios.spread()
方法即可,如下所示:
axios.all([
axios({
url: 'https://store.crmeb.net/api/pc/get_products',
params: {
page: 1,
limit: 20,
cid: 57,
sid: 0,
priceOrder: '',
news: 0,
}
}),
axios({
url: 'https://store.crmeb.net/api/pc/get_company_info',
})
// 箭头函数一个参数可以省略小括号(),多个参数则不能省略
]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
小知识点:
- 对象解构
const obj = {
name: 'lotdoc',
age: 30
}
// 解构
const {name, age} = obj;
- 数组解构
const names = ['刘德华', '张学友', '黎明', '郭富城']
// 下标解构
const name1 = names[0]
.
.
// 数组解构
const [name1, name2, name3, name4] = names
更多推荐
已为社区贡献1条内容
所有评论(0)