精华内容
下载资源
问答
  • 2022-03-30 18:48:58

    学习内容:

    axios.all 与 axios.spread 的实质


    学习笔记:

    axios.all 与 axios.spread 的实质

    • 1、axios.all 的本质

    我们从上一篇的学习中可以看到:
    针对 axios.all 方法,从它的使用方式以及使用形式上看,与 Promise.all方法很相似。
    那么我们了解一下 Promise.all 方法是如何使用的:

    function getDeptAccount() {
      return axios.get('/sys/dept/123');
    }
    
    function getDeptPermissions() {
      return axios.get('/sys/dept/123/permissions');
    }
    
    axios.all([getDeptAccount(), getDeptPermissions()])
      .then(axios.spread((acct, perms) => {
        // 两个请求都完成后
      }));
    
    注:acct   为方法一 getDeptAccount()  的返回值
        perms  为方法二 getDeptPermissions()  的返回值
    
    function getDeptAccount() {
      return axios.get('/sys/dept/123');
    }
    
    function getDeptPermissions() {
      return axios.get('/sys/dept/123/permissions');
    }
    
    Promise.all([getDeptAccount(), getDeptPermissions()])
      .then(([acct,perms]) => {
        // 两个请求都完成后
      }));
      
      注:acct   为方法一 getDeptAccount()  的返回值
        perms  为方法二 getDeptPermissions()  的返回值
    

    从上述的例子中我们可以看到,axios.all方法与Promise.all方法是几乎是一模一样的。
    (不论是 使用方式 还是 传入的参数)

    • 2、 axios.spread本质

    上面我们发现,axios.all方法与Promise.all方法几乎是一模一样的,唯一不同的地方就是then方法中包含的内容有所不同,
    那么我们先来比较这两个then方法中的内容:

    // 1、axios.all的then
    
    axios.all([getDeptAccount(), getDeptPermissions()])
      .then(axios.spread((acct, perms) => {
        // 两个请求都完成后
      }));
    
    axios.spread((acct, perms) => {})
    
    注:acct   为方法一 getDeptAccount()  的返回值
        perms  为方法二 getDeptPermissions()  的返回值
    
    // 2、Promise.all的then
    
    Promise.all([getDeptAccount(), getDeptPermissions()])
      .then(([acct,perms]) => {
        // 两个请求都完成后
      }));
    
    ([acct,perms]) => {}
    
    注:acct   为方法一 getDeptAccount()  的返回值
        perms  为方法二 getDeptPermissions()  的返回值
    

    总结:
    1、Promise.all的then方法里面是个函数,函数的参数是所有请求的响应组成的数组;
    2、axios.all的then方法里面调用了axios.spread方法,axios.spread方法接收一个函数作为参数,该参数函数的参数也是所有请求的响应。

    **疑问:**那么如果我们创建一个axios.spread方法并且让axios.spread((acct, perms) => {})的返回值与([acct,perms]) => {}等价,两种方法是不是就完全相同了呢?

    更多相关内容
  • 今天在项目中使用axios时发现axios.all() 方法可以执行但是控制台报错,后来在论坛中看到是由于axios.all() 方法并没有挂载到 axios对象上,需要我们手动去添加 == 只需要在你封装的axios文件里加入 == instance....
  • axios.allaxios.spread ***注意这里的$get是封装的axios方法 //方法一: searchTopic() { return this.$axios({ url:'地址1', method:'方式',//get/post/patch/put/deleted params:{//参数get所以用params。...
  • axios.all与Promise.all并发请求

    千次阅读 2020-11-18 16:35:10
    目前并发请求主要有Promise.allaxios.all两种方式,下面做详细介绍。 Promise.all Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。 var p = Promise.all([p1,p2,p3]); 上面代码中,...
    前言

    在工作中当我们的项目来到一个新的页面需要发多个请求,而这些请求的数据又毫不相干时,我们可以采取并发请求的方式。目前并发请求主要有Promise.all和axios.all两种方式,下面做详细介绍。

    Promise.all

    Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

    var p = Promise.all([p1,p2,p3]);
    

    上面代码中,Promise.all 方法接受一个数组作为参数,p1、p2、p3 都是 Promise 对象的实例。(Promise.all 方法的参数不一定是数组,但是必须具有 iterator 接口,且返回的每个成员都是 Promise 实例。)

    p 的状态由 p1、p2、p3 决定,分成两种情况

    • (1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
    • (2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

    下面是一个具体的例子

    // 3个函数都是封装的axios,返回promise实例的函数
    let reqArr = [getNames(), getTypes(), getAges()]
    
     Promise.all(reqArr).then((resArr) => {
           console.log('请求结果', resArr)
     })
    
    // 如果3个请求都成功,返回结果是存放3个请求结果的数组
    
    

    在这里插入图片描述

    axios.all

    axios.all的用法基本和Promise.all一致,因为axios.all方法就是对Promise.all方法进行了一层包装,本质上是一模一样的,没有任何额外的逻辑,所以调用axios.all方法就是调用了Promise.all方法。

    注意:axios.all是axios的静态方法,不是axios实例的方法!可通过在main.js中引入axios,并将其挂载在vue原型上,实现全局使用

    let reqArr = [getNames(), getTypes(), getAges()]
    
    axios.all(reqArr).then((resArr) => {
         console.log('请求结果', resArr)
     })
    // 返回结果同上
    

    axios.all与Promise.all有区别的地方在于then中对于返回结果的处理,axios除了上面这种用法之外,还可以在then中调用axios.spread函数,axios.spread函数接受一个回调函数,回调函数的参数就是与请求相同顺序和数量的返回结果

    let reqArr = [getNames(), getTypes(), getAges()]
    
     axios.all(reqArr).then(axios.spread((first, second, third)=>{
                console.log('结果1', first)
                console.log('结果2', second)
                console.log('结果3', third)
    }))
    

    返回结果
    在这里插入图片描述
    axios.all与Promise.all之间的关系
    axios.all方法就是对Promise.all方法进行了一层包装,本质上是一模一样的,没有任何额外的逻辑

    1. axios.all的本质
    axios.all = function(promises) {
      return Promise.all(promises);
    };
    
    1. axios.spread的本质
      axios.all方法与Promise.all方法是一模一样的,唯一看起来不同的地方就是then方法,我们先来比较这两个then方法中的内容:
    // axios.all的then
    axios.spread((first, second) => {})
    
    // Promise.all的then
    ([first, second]) => {}
    
    

    我们可以看到,Promise.all的then方法里面是个函数,函数的参数是所有请求的响应组成的数组;而axios.all的then方法里面调用了axios.spread方法,axios.spread方法接收一个函数作为参数,该参数函数的参数也是所有请求的响应,既然上文说了axios.all方法与Promise.all方法是一模一样的,那么我们只需想办法再让两个then方法相同即可。也就是说我们创建一个axios.spread方法并且让axios.spread((first, second) => {})的返回值与([first, second]) => {}等价即可。

    axios.spread的实现

    axios.all = function(promises) {
      return Promise.all(promises);
    };
    axios.spread = function(callback) {
      return function wrap(arr) {
        return callback.apply(null, arr);
      };
    };
    
    
    并发请求时的错误处理
    1. 给每个promise添加catch

    根据Promise.all的用法我们知道,当参数数组中的所有promise实例都是fulfilled状态时,Promise.all的返回实例才会是fulfilled,否则返回实例的状态就是rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

    这也就意味着我们并发的几个请求当中,只要有一个请求出错,就无法返回正常的结果。但我们希望有错误出现时,也能正常返回其他请求成功的结果。我们可以通过为每个请求添加catch错误处理来实现

    let reqArr = [axios({method: 'get', url: 'www.baidu.com'}), getTypes(), getAges()]
    
    // 为每个请求添加错误处理
     let handledErrReqs = reqArr.map(item => item.catch(error => {
            // 错误处理代码
            console.log('请求出错', error)
            
            // 也可以返回你想要的错误提示结果,如果不返回数据,那么获得的值就是undefined
            // return {msg: '请求出错'}
     }))
    axios.all(handledErrReqs).then(axios.spread((first, second, third)=>{
            console.log('结果1', first)
            console.log('结果2', second)
            console.log('结果3', third)
     }))
    

    以上方法对axios.all与Promise.all都适用

    1. 使用Promise.allSettled代替Promise.all

    如果我们想获得reqArr 中的所有数据,不管他是成功还是失败
    它的用法和Promise.all一致,只是返回结果有所差异

    Promise.allSettled 等待所有的 promise 都被 settle,无论结果如何。结果数组具有:

    • {status:“fulfilled”, value:result} 对于成功的响应
    • {status:“rejected”, reason:error} 对于 error

    例如对于上面的例子

    let reqArr = [axios({method: 'get', url: 'www.baidu.com'}), getTypes(), getAges()]
    
    Promise.allSettled(reqArr).then(results => {
    	console.log(results )
    })
    

    上面的results将会是

    [
      {status: 'rejected', reason: ...error object...},
      {status: 'fulfilled', value: ...response...},
      {status: 'fulfilled', value: ...response...}
    ]
    

    所以,对于每个 promise,我们都得到了其状态(status)和 value/reason。

    注意:这个方法是最近新增的内容,所以存在一些兼容性问题,可通过polyfill解决。
    如果浏览器不支持 Promise.allSettled,很容易进行 polyfill:

    if (!Promise.allSettled) {
      const rejectHandler = reason => ({ status: 'rejected', reason });
    
      const resolveHandler = value => ({ status: 'fulfilled', value });
    
      Promise.allSettled = function (promises) {
        const convertedPromises = promises.map(p => Promise.resolve(p).then(resolveHandler, rejectHandler));
        return Promise.all(convertedPromises);
      };
    }
    

    在这段代码中,promises.map 获取输入值,并通过 p => Promise.resolve§ 将输入值转换为 promise(以防传递了 non-promise),然后向每一个 promise 都添加 .then 处理程序(handler)。

    这个处理程序(handler)将成功的结果 value 转换为 {status:‘fulfilled’, value},将 error reason 转换为 {status:‘rejected’, reason}。这正是 Promise.allSettled 的格式。

    然后我们就可以使用 Promise.allSettled 来获取 所有 给定的 promise 的结果,即使其中一些被 reject。

    参考文章:
    【异步技术】Axios并发请求
    axios添加axios.all和axios.spread方法,与promise.all
    并发请求时错误处理
    JavaScript Promise 对象

    展开全文
  • 在官方 axios 中,还提供了 axios.allaxios.spread 这两个方法,这两个方法主要是为了执行多个并发请求,官方文档中,它们的用法示例如下: function getUserAccount() { return axios.get(’/user/12345’); } ...

    1.前言
    在官方 axios 中,还提供了 axios.all和axios.spread 这两个方法,这两个方法主要是为了执行多个并发请求,官方文档中,它们的用法示例如下:

    function getUserAccount() {
      return axios.get('/user/12345');
    }
    
    function getUserPermissions() {
      return axios.get('/user/12345/permissions');
    }
    
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread((acct, perms) => {
        // 两个请求都完成后
      }));
    

    从用法示例中可以看出:

    axios.all方法接受一个数组作为参数,数组中的每个元素都是一个请求,返回一个promise对象,当数组中所有请求均已完成时,执行then方法。
    在then方法中执行了 axios.spread 方法。该方法是接收一个函数作为参数,返回一个新的函数。接收的参数函数的参数是axios.all方法中每个请求返回的响应。
    回到顶部
    2. 窥探本质
    2.1 axios.all本质
    从axios.all方法的使用方式以及使用形式上看,是不是跟Promise.all方法很相似?对,没错,axios.all就是给Promise.all方法换了个名字而已,我们看看Promise.all方法是如何使用的,如下:

    function getUserAccount() {
      return axios.get('/user/12345');
    }
    
    function getUserPermissions() {
      return axios.get('/user/12345/permissions');
    }
    
    Promise.all([getUserAccount(), getUserPermissions()])
      .then(([acct,perms]) => {
        // 两个请求都完成后
      }));
    

    我们可以看到,axios.all方法与Promise.all方法是一模一样的,不管是使用方式还是传入的参数都是一模一样的。axios.all的本质搞明白以后我们再看看axios.spread的本质。

    2.2 axios.spread本质
    上文说了,axios.all方法与Promise.all方法是一模一样的,唯一看起来不同的地方就是then方法,我们先来比较这两个then方法中的内容:

    // axios.all的then
    axios.spread((acct, perms) => {})
    
    // Promise.all的then
    ([acct,perms]) => {}
    

    我们可以看到,Promise.all的then方法里面是个函数,函数的参数是所有请求的响应组成的数组;而axios.all的then方法里面调用了axios.spread方法,axios.spread方法接收一个函数作为参数,该参数函数的参数也是所有请求的响应,既然上文说了axios.all方法与Promise.all方法是一模一样的,那么我们只需想办法再让两个then方法相同即可。也就是说我们创建一个axios.spread方法并且让axios.spread((acct, perms) => {})的返回值与([acct,perms]) => {}等价即可。

    OK,搞清楚这两个方法的本质以后,我们就来着手实现它们。

    回到顶部
    3. 方法接口类型定义
    实现这两个方法之前,我们先在src/types/index.ts中的AxiosStatic中为这两个方法添加接口类型,如下:

    export interface AxiosStatic extends AxiosInstance {
      // 新增
      all<T>(promises: Array<T | Promise<T>>): Promise<T[]>;
      spread<T, R>(callback: (...args: T[]) => R): (arr: T[]) => R;
    }
    

    添加好之后接下来就来实现这两个方法。

    回到顶部
    4. 方法实现
    这两个方法是挂载到axios混合对象上的,那么我们就在src/axios.ts中实现这两个方法,并将其挂载到axios上,如下:

    axios.all = function(promises) {
      return Promise.all(promises);
    };
    axios.spread = function(callback) {
      return function wrap(arr) {
        return callback.apply(null, arr);
      };
    };
    

    根据第2章的分析:

    axios.all方法就是对Promise.all方法进行了一层包装,本质上是一模一样的,没有任何额外的逻辑,所以调用axios.all方法就是调用了Promise.all方法。
    对于axios.spread方法,根据我们的分析结果只需让axios.spread((acct, perms) => {})的返回值与([acct,perms]) => {}等价即可。
    OK,这样就把这两个方法实现完毕了,接下来我们来编写demo来测试下效果如何。

    回到顶部
    5. demo编写
    在 examples 目录下创建 allAndSpread目录,在 allAndSpread目录下创建 index.html:

    allAndSpread demo

    接着再创建 app.ts 作为入口文件:

    import axios from "../../src/axios";
    
    function getA() {
      return axios.get("/api/allAndSpreadA");
    }
    
    function getB() {
      return axios.get("/api/allAndSpreadB");
    }
    
    axios.all([getA(), getB()]).then(
      axios.spread(function(resA, resB) {
        console.log(resA.data);
        console.log(resB.data);
      })
    );
    
    axios.all([getA(), getB()]).then(([resA, resB]) => {
      console.log(resA.data);
      console.log(resB.data);
    });
    

    接着在 server/server.js 添加新的接口路由:

    // 添加axios.all和axios.spread方法

    router.get("/api/allAndSpreadA", function(req, res) {
      res.json({
        data: "allAndSpreadA"
      });
    });
    router.get("/api/allAndSpreadB", function(req, res) {
      res.json({
        data: "allAndSpreadB"
      });
    });
    

    最后在根目录下的index.html中加上启动该demo的入口:

    • allAndSpread
    • OK,我们在命令行中执行:

      同时开启客户端和服务端

      npm run server | npm start
      接着我们打开 chrome 浏览器,访问 http://localhost:8000/ 即可访问我们的 demo 了,我们点击 allAndSpread,就可以看到两个请求都已经正常发出,并且打开F12中的控制台可以看到两个请求的响应都已经返回了。
      在这里插入图片描述

    展开全文
  • axios.all()和axios.spread()解决Vue的高并发请求问题

    千次阅读 多人点赞 2022-04-19 14:21:39
    我们在Vue项目开发当中经常会遇到一个组件渲染需要的基础数据可能需要向后台发送很多请求,此时,我们一一发送显然是不合理的,一般情况下我们都是使用axios.all()方法进行并发请求处理 标准格式 这里是在VsCode上敲...

    前言

    我们在Vue项目开发当中经常会遇到一个组件渲染需要的基础数据可能需要向后台发送很多请求,此时,我们一一发送显然是不合理的,一般情况下我们都是使用axios.all()方法进行并发请求处理

    标准格式

    这里是在VsCode上敲出axios.all(我装了插件)自动生成的格式,可以看出axios.all接收一个数组参数,并且其是基于promise的
    我们一般处理并发请求,肯定不是拿到实际返回的数据,一定会对返回数据进行处理,所以axios.spread的作用就是对返回数据进行处理。

    axios.all([callback1,callback2])
        .then(axios.spread((res1, res2)=>{
     }))
    

    还有一种格式就是

    axios.all([]).then(
    	result => {}
    )
    

    案例

    这是菜鸟教程上给的例子

    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) {
        // 两个请求现在都执行完成
      }));
    

    下面这个是我自己开发时候写到的一个例子

    async getMenuList() {
          let sendArr = [
          // 这里是因为我在main.js上将axios挂载到了$http
            this.$http.get('menus'),
            this.$http.get('users', {
              params: this.queryInfo
            })
          ]
          this.$http.all(sendArr).then((result) => {
            const { data: res1 } = result[0]
            const { data: res2 } = result[1]
            console.log(res2)
            if (res1.meta.status !== 200) {
              return this.$message.error(res1.meta.msg)
            }
            this.menuList = res1.data
            if (res2.meta.status !== 200) {
              return this.$message.error(res2.meta.msg)
            }
            this.userList = res2.data
          })
          // const { data: res } = await this.$http.get('menus')
          // if (res.meta.status !== 200) {
          //   return this.$message.error(res.meta.msg)
          // }
          // this.menuList = res.data
        }
    
    展开全文
  • axios并发请求
  • axios.all方法

    千次阅读 2021-08-11 20:58:12
    axios.all方法 axios.all; axios.spread; 作用:解决并发请求; 语法: axios.all([fn1(),fn2()]).then((fn1,fn2)={ console.log(res1,res2)//res1为fn1函数的返回值,res2为fn2函数的返回值 }) 该方法是基于promise....
  • axios.all(iterable)和axios.spread(callback) 当我们同时处理多个请求的时候,就会用到axios的并发处理,用到的方法就是axios.all(iterable)和axios.spread(callback)。axios.all方法跟promise.all方法一样里边传一...
  • 在所需组件中使用axios配合axios.all()、axios.spread()同时发送多个请求 propertyRight.vue created() { // 测试axios.all var me = this axios .all([me.getTitle(), me.getNumber()]) .then( axios.spread...
  • 在做项目的过程中,可能会出现这样的场景:某个模块的数据后端是通过好几个接口分开给前端...于是乎~就想到了并行请求Axios.all()(所有请求同时进行,并且所有请求全部完成后再对数据进行处理),如下: 下面是官方例
  • 博主在项目中,封装了axios,在项目里使用axios.all并发请求时,却发现报错。一搜才知道,axios.all是静态方法 解决方法:用Promise.all替代axios.all 代码: const postAround = (aroundForm)=>{ return axios({...
  • axios.all is not a function

    2022-02-22 07:06:21
    今天遇到一个axios.all不是函数的错误 好久不记笔记了,心血来潮记一下 错误图片(request是封装的axios) 解释图片 GitHub解释
  • 一:axios的基本使用,获取增删改 1.axios调用的返回值是Promise实例。 2.成功的值叫response,失败的值叫error。 3.axios成功的值是一个axios封装的response对象,服务器返回的真正数据在response.data中 ...
  • axios.all并发请求

    2020-07-14 19:52:17
    直接上代码 const id_list = [1,2] const req_list = [] id_list.forEach(item=>{ //infoCommodity 请求对象 req_list.push(infoCommodity... axios.all(req_list).then(axios.spread((...data)=>{ ..
  • axios解决高并发的方法:axios.all()、axios.spread()

    万次阅读 多人点赞 2019-10-16 21:29:44
    前言: 很多时候,我们可能需要同时调用多个...axios.allaxios.spread ***注意这里的$get是封装的axios方法,有兴趣的朋友请参考另一篇 //方法一: searchTopic() { return this.$axios({ url:'地址1', ...
  • 需要同时发送多条请求时,使用axios.all()和axios.spread()结合
  • 在项目中使用axios.all发送并发请求,项目跑起来时报axios.all is not function 解决办法 错误的原因是由于all是静态方法,静态方法的调用只能通过类名点(className.)的方式调用,而我们导入到Vue项目中的是axios的...
  • 场景需求: 一个接口的参数会需要使用另一个接口获取 ...axios.all(接口1, 接口2) axios.spread(callback1, callback2) 1、引入接口 import axios from "axios" import {getSellerDetail} from '../../api/s...
  • axios 同时执行多个请求 axios.all

    千次阅读 2020-03-16 10:53:41
    // 这里拿到的res就是每个方法调用后的返回值 })) 同时执行多个请求,在成功回调里执行下一步显然行不通,为了防止方法之间的干扰,即使某个方法执行失败,也不会影响其他方法的执行,这个时候axios.all 方法就很好...
  • axios通讯库的axios.all方法可以同时发送几条请求来获取数据,当所有请求都返回后一次性把返回结果呈现出来,而且还是按照指定的调用顺序,非常方便。 //例子1 function truct() { return axios.get(...
  • 如果我们需用在两个接口同时完成后,然后在执行一些逻辑,我们可以使用axios.all处理并发请求,如下所示: function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { ...
  • 很多时候,我们需要同时向后端进行多个请求,当所有请求都返回数据后,再进行一些操作。比如:初始化页面时,可能需要初始化一些基础数据,...在axios官方文档中对一次性并发多个请求示例如下: function getUs...
  • 第一个想法就是axios.all并发请求,but,这样只是同时发送了多个请求,得到的只能是一个装着每个请求的数据。 这是我模拟的服务器接口部分代码 router.get("/one", (req, resp) => { let data = [{id: 1}]; ...
  • vue项目中使用axios.all处理并发请求报_util2.default.axios.all is not a function异常 报错: _util2.default.axios.all is not a function代码:init () { util.axios.all([this.getCourseInit(), this....
  • axios.all执行多个不确定的请求

    千次阅读 2018-11-30 17:47:04
    axios.all执行多个不确定的请求前提解决方法 前提 在table列表中直接修改后,将每行修改的数据保存起来,点击保存后,发送修改请求,全部请求成功后才返回修改成功 解决方法 使用axios.all和map结合起来 this....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,625
精华内容 6,650
关键字:

axios.all