axios解决高并发的方法

最新推荐文章于 2024-05-10 15:27:29 发布

.Tricia.

最新推荐文章于 2024-05-10 15:27:29 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： javascript 前端 axios

本文链接：https://blog.csdn.net/qq_41675812/article/details/125340545

版权

前端专栏收录该内容

51 篇文章 2 订阅

订阅专栏

本文介绍了在JavaScript项目中如何使用axios处理高并发请求。通过axios.all()结合axios.spread()方法，可以在所有请求完成后统一处理结果，避免了高并发导致的问题。这种方法允许在main.js中全局注册axios，并在需要时调用，确保所有请求并行执行且在完成时执行回调。

摘要由CSDN通过智能技术生成

参考： axios中文文档

高并发产生的原因

在项目使用时可能会同时调用多个后台接口，等请求全部执行完毕后，才会进行下一步操作。这样就会产生高并发的问题

解决办法

axios.all()和 axios.spread()

该方法是axios的静态方法，不是axios实例的方法
可通过在main.js中引入axios，并将其挂载在vue原型上，实现全局使用
用法：

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成，，两个参数分别代表返回的结果
}));

axios.all方法接受一个数组作为参数，数组中的每个元素都是一个请求，返回一个promise对象，当数组中所有请求均已完成时，执行.then方法。
axios.spread 方法是接收一个函数作为参数，返回一个新的函数。接收的参数函数的参数是axios.all方法中每个请求返回的响应。