1、项目背景
在写项目时候,有好几个下拉框数据是需要通过固定接口获取的,每一个接口都需要发送一次请求写一个方法进行数据处理。就想到看采用axios的all()方法
2、axios.all()和axios.spread()
一次需要多个请求,使用axios.all()
和axios.spread()
方法可以实现多请求并发执行并接收的功能,两者都是axios
的静态方法,不是实例方法,可直接使用axios
调用
注意,如果多个请求中某个请求发生错误,会导致后续请求也不再执行
3、代码部分
这个是在request.js文件中,顺带把axios的post请求get请求给写了
get请求分为json格式和表单格式
import axios from 'axios'
Vue.prototype.$http = axios // 并发请求
const $axios = axios.create({
// 设置超时时间
timeout: 3000,
// 基础url,会在请求url中自动添加前置链接
baseURL: 'xxxxxxxxxx'
})
// get,post请求方法
export default {
post(url, data) {
return $axios({
method: 'post',
url,
data: Qs.stringify(data),
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
服务器托管网 }
})
},
post2(url, data) {
return $axios({
method: 'post',
url,
data: data,
headers: {
'Content-Type': 'application/json'
}
})
},
get(url, params) {
return $axios({
method: 'get',
url,
params
})
}
}
4、使用
mounted() {
this.getAgentList()
},
methods: {
// 获取a,b,c
getAgentList() {
// queryA().then((res) => {
// if (res.success == true) {
// console.log(res);
// this.xxx = res.data;
// }
// });
// queryB().then((res) => {
// if (res.success == true) {
// this.XXXXX = res.list;
// }
// });
// queryC().then((res) => {
// if (res.success == true) {
// this.C = res.list;
// }
// });
this.$http
.all([
queryA(),
queryB(),
queryC()
])
.then(
this.$http.spread((re服务器托管网s1, res2, res3) => {
console.log(res3)
this.A = res1.data
this.B = res2.list
this.C = res3.list
})
)
},
}
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
一、百度搜索greasyfork网站 二、在搜索框输入百度网盘批量下载 三、找到作服务器托管网者为HD2A的百度网盘批量下载,页面如下所示 推荐浏览器为谷歌和火狐,以下以谷歌浏览器为例!!! 四、先右击管理器插件,选择在新标签页中打开链接,页面如下所示 五、下…