axios.all方法

axios.all方法

axios.all;

axios.spread;

作用:解决并发请求;

语法:

axios.all([fn1(),fn2()]).then((fn1,fn2)=>{
	console.log(res1,res2)//res1为fn1函数的返回值,res2为fn2函数的返回值
})
该方法是基于promise.all的

例子:

methods: {
   
    fn1(){ 
     return this.$axios.get(`url1`)
    },
    fn2(){
      return this.$axios.get(`url2`)
    }
  },
  mounted(){
  	let  _this=this//要改变this指向,因为promise中的this 指向promise实例
   	this.$axios.all([_this.fn1(),_this.fn2()]).then(//并行请求要加()调用
      _this.$axios.spread((res1,res2)=>{
        console.log(res1)
        console.log(res2)
      })
    )
  }
  
注意

用axios.all()、axios.spread()这两个函数来处理多个请求,该方法是axios的静态方法,不是axios实例方法! 不是axios实例方法! 不是axios实例方法 ,写错会报错


**

[外链图片转存中…(img-QQqYdx0Z-1628686668656)]

`axios.all()` 和 `axios.spread()` 是 Axios 库中用于并发请求处理的两个函数,它们通常一起使用来进行批量发送请求并获取所有响应结果。`axios.all()` 接收一个数组,该数组包含了你要并发发送的多个请求;`axios.spread()` 则接收一个函数作为回调,这个函数会在所有请求完成后接收到每个请求的结果。 如果你想使用泛型来传递参数,通常不会直接在 `axios.all()` 中使用泛型,因为 Axios 的 API 对象本身并不支持泛型。然而,你可以通过 TypeScript 等静态类型检查工具,在编写代码时为参数类型添加约束,来表达你期望的参数应该是 Axios 请求实例。 例如: ```typescript function makeRequests<T extends AxiosRequestConfig[]>(configs: T): Promise<{ [index: number]: AxiosResponse }> { const promises = configs.map(config => axios.request(config)); return axios.all(promises).then(axios.spread((...responses) => { // responses 数组包含原始请求的所有响应 return responses as { [index: number]: AxiosResponse }; })); } // 使用示例 const requests: AxiosRequestConfig[] = [ { url: 'https://api.example.com/endpoint1', method: 'get' }, { url: 'https://api.example.com/endpoint2', method: 'post', data: { key: 'value' } } ]; makeRequests(requests) .then(results => { console.log(results); }) .catch(error => { console.error('Error:', error); }); ``` 在这个例子中,`T` 表示参数列表应该是一组 Axios 请求配置,然后我们使用了泛型确保了传入的参数是正确的类型。在返回值中,我们将响应数组转换为了 `<{ [index: number]: AxiosResponse }>` 类型,表明每个元素都是 AxiosResponse 类型。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值