zoukankan      html  css  js  c++  java
  • react项目中如何解决同时需要多个请求问题

     


     

    在工作中,遇到一个需求,需要展示一个列表,第一次请求只有列表的名字,需要在知道名字的情况下,再去请求每个列表的详细信息,然后展示完整的列表信息。

    经过一番研究,发现多重的请求写在页面的方法里比较好实现。其他的在effects和servers里都不太好实现。

    首先我们在 componentDidMount这个生命周期里进行操作:

    在dispatch请求后,在.then中获取上一个请求返回的数据。然后做逐一请求的动作。
    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
          type: 'release/fetchAnnounce',
          payload: {
            cluster:"guanwang"
          },
        }).then((data)=>{
          this.newResults(data)
        })
      };
     

    newResults方法 的书写:

    Promise.all的讲解
     newResults=(data)=>{
        const newData=[];
        data.map(item=>{
          newData.push(...item)
        })
       // 异步操作,需要等待所有的请求接口完成以后,拿到全部的数据去使用
        const newResult=async ()=> {
          await Promise.all(
            newData.map((item, index) => {
              return   request(
                `/api/v1/admin/rule-set/list`
              ).then(r => {
                const val=
                  {
                    id: index + 1,
                    ...r.data[0],
                    ...item
                  };
                return val
              })
            })
          ).then((values)=>{
            this.setState({releaseVal:values})
          })
        }
        newResult()
      };

    Promise.all的讲解

    Promise.all在处理异步请求很有用。举个例子:

    let q1 = new Promise((resolve, reject) => {
      resolve('处理成功了')
    })
    
    let q2 = new Promise((resolve, reject) => {
      resolve('success')
    })
    
    let q3 = Promse.reject('error')
    
    Promise.all([q1, q2]).then((res) => {
      console.log(res)               //['处理成功了', 'success']
    }).catch((error) => {
      console.log(error)
    })
    
    Promise.all([q1,q3,q2]).then((res) => {
      console.log(res)
    }).catch((error) => {
      console.log(error)      // 失败了,打出 'error'
    })

    它可以让你等待所有的操作完成后进行操作,而且它完成的返回结果是按 q1,q2,q3的顺序来的。不会因为p2的结果先出来就排在最前面。

    知道Promise.all,就相对于的可以了解一下Promise.race

    Promise.race的使用方法和Promise.all差不多。唯一的不同就是返回的顺序不同,Promise.race是按照运行的先后顺序进行排列的。假如q2先完成,q2的返回就会排在最前面。

  • 相关阅读:
    如何进行在线Post接口测试?
    如何作为手动测试人员进入自动化测试
    用于测试API的开发人员工具
    使用Eolinker API 监控将API升到一个全新的水平
    如何通过自动化随着时间的推移增加测试覆盖率
    如何使用eolinker管理api
    从手动测试转向自动测试
    API是什么以及它为什么重要
    关于API网关(二)成本
    软件可测试性
  • 原文地址:https://www.cnblogs.com/class1/p/15776276.html
Copyright © 2011-2022 走看看