js: 拿到多个请求的结果Promise.all并发请求-CSDN博客

本文链接：https://blog.csdn.net/qq_36413371/article/details/121349340

Promise.all([


new Promise((rs,rj)=> {
    setTimeout(() => {
            rs('p2')

    }, 5000)
    
})

, new Promise((rs,rj)=> {
    setTimeout(() => {
            rs('p1')

    }, 2000)
    
})


 ]).then((result) => {
    console.log(result)
})

---- fetch方式实现

   Promise.all([
      new Promise((rs, rj) => {
        fetch('https://api04.aliyun.venuscn.com/mobile?mobile=17628873245',
          {
            headers: {
              'Authorization': 'APPCODE 08d79d4b101e42cfb2c271c1871ebd21'
            }
          })
          .then(function (response) {
            rs([null, response])
          })
          .catch(function (err) {
            console.log(err);
            rs([err, null])
          });
      })
      , new Promise((rs, rj) => {
        fetch('https://qyexpress.market.alicloudapi.com/composite/queryexpress?number=YT6085046461082',
          {
            headers: {
              'Authorization': 'APPCODE 08d79d4b101e42cfb2c271c1871ebd21'
            }
          })
          .then(function (response) {
            // rs(response.json())
            rs([null, response])
          })
          .catch(function (err) {
            // console.log(err);
            rs([err, null])
          });
      })


    ]).then((result) => {
      console.log('多个接口的数据', result)
    })

在这里插入图片描述
—vue和react中（axios方式）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    console.log(axios)
    // config.js
    // export const baseURL = 'http://api.suotuobao.com/api/' // 线上接口
    // export const timeout = 30000
    const baseURL = 'http://api.suotuobao.com/api/'
    const timeout = 30000
    // http.js
    // import { baseURL, timeout, applicationKey } from './config'
    axios.defaults.timeout = timeout
    axios.defaults.baseURL = baseURL

    // api.js
    function getMobileInfo() {
      return new Promise((rs, rj) => {
        axios({
          headers: {
            'Authorization': 'APPCODE 08d79d4b101e42cfb2c271c1871ebd21'
          },
          url: 'https://api04.aliyun.venuscn.com/mobile?mobile=17628873245',
        }).then(res => {
          rs([null, res.data])
        }).catch(err => {

        })
      })
    }
    function getExpressInfo() {
      return new Promise((rs, rj) => {
        axios({
          headers: {
            'Authorization': 'APPCODE 08d79d4b101e42cfb2c271c1871ebd21'
          },
          url: 'https://qyexpress.market.alicloudapi.com/composite/queryexpress?number=YT6085046461082',
        }).then(res => {
          rs([null, res.data])
        }).catch(err => {

        })
      })
    }
    $util = {
      getMobileInfo,
      getExpressInfo
    }
    // main.js入口引入
    // main.js
    axios.all([$util.getMobileInfo(), $util.getExpressInfo()]).then(axios.spread(function (allSearchTopic, allSearchs) {
      console.log(allSearchTopic, '|||', allSearchs)
      // debugger//打印可以拿到所有的返回值
      // allSearchTopic == 方法一的返回值
      // allSearchs == 方法二的返回值
    }))
  </script>
</body>

</html>