使用Promise异步发送多个fetch

最新推荐文章于 2024-05-24 09:41:45 发布
最新推荐文章于 2024-05-24 09:41:45 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： JS 文章标签： Promise 多个fetch请求
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MrJavaweb/article/details/77532991
版权
这篇博客介绍了如何使用Promise处理多个fetch请求。Promise对象代表异步操作，具有不可变的状态特性，允许以同步方式编写异步代码。通过Promise，可以避免回调地狱并简化异步流程控制。文中包含示例代码，展示了如何并发执行多个fetch请求。
摘要由CSDN通过智能技术生成

ES6 原生提供了 Promise 对象。

所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

Promise 对象有以下两个特点。

（1）对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

代码：


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  JAVA_Drious
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
promise.all实战

				
			

			

				

					qq_36262295的博客
				

				

					10-14
					
					251
					
				

			

		

		

			
				
async函数执行返回的是 Promise {}所以执行结果符合并发预期。

			
		

	



                

              
                



	

		

			

				
					
关于Promise和fetch的使用

				
			

			

				

					m0_55861837的博客
				

				

					03-23
					
					1677
					
				

			

		

		

			
				
浅浅说明promise，关于fetch的使用方法，


			
		

	



                


  
              

                


	

		

			

				
					
不懂就问，Promise.all调用fetch真的是并行吗？

					
最新发布

				
			

			

				

					weixin_56052200的博客
				

				

					05-24
					
					118
					
				

			

		

		

			
				
通过打印信息可知，程序在执行完getcharts后才开始执行另外一个。所以我就有个疑问，Promise.all真的是并行或者并发吗？在某个JS中用Promise.all调用两个fetch，并在对应路由函数中打印进入和离开的时间。丑话说在前，本人为嵌入式工程师因工作需要来编写前后端代码，不是专业的，如有错误，还望多多见谅。

			
		

	





	

		

			

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

				
			

			

				

					qq_36413371的博客
				

				

					11-16
					
					1826
					
				

			

		

		

			
				
Promise.all([


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

    }, 5000)
    
})

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

    }, 2000)
    
})


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

			
		

	



		

			
		



	

		

			

				
					
promise.all解决多个异步请求问题

				
			

			

				

					丁哒哒的博客
				

				

					11-26
					
					4997
					
				

			

		

		

			
				
问题引出：

今天做项目时，遇到这样一个情况，长传图片或者视频等文件时，能够选择多个，但是每一个要请求一次接口，这就出现了一个问题，每一次请求之间都是有依赖关系的，如果使用ajax的重重嵌套，会显得比较麻烦，而且容易产生回调地狱，所以我使用了promise.all + axios来解决这个问题，也可以使用async，await等。

代码如下：


let promiseArr = [];
/...

			
		

	





	

		

			

				
					
Fetch+Promise教程

				
			

			

				

					09-19
				

			

		

		

			
				
一个 Headers 对象具有关联的头列表，它最初为空，由零个或多个键值对组成。  Headers 对象的构造函数是 Headers.Headers()，可以创建一个新的 Headers 对象。它还提供了多种方法，例如 append()、delete()、entries...

			
		

	





	

		

			

				
					
react-native fetch的具体使用方法

				
			

			

				

					11-29
				

			

		

		

			
				
在React Native项目中，`fetch`是一个常用且高效的选择，尤其是在处理异步数据流和构建实时应用时。不过，由于浏览器兼容性问题，可能需要配合polyfills或使用其他库（如axios）来确保在所有目标平台上都能正常工作...

			
		

	





	

		

			

				
					
对异步请求xhr、ajax、axios、fetch的区别比较

				
			

			

				

					01-08
				

			

		

		

			
				
总结来说，xhr是最基础的异步请求方式，jQuery的$.ajax简化了使用，axios提供了Promise支持，适合现代项目，而fetch则提供了一种更现代、简洁的API。选择哪种方式取决于项目需求、浏览器兼容性和开发团队的技术栈。

			
		

	





	

		

			

				
					
vue项目中使用fetch的实现方法

				
			

			

				

					12-09
				

			

		

		

			
				
以上代码中，我们封装了一个fetchAPI函数，处理了GET和POST请求的参数，设置了默认的请求头、跨域模式和携带cookie的选项，并通过try-catch结构处理了可能的错误。  在Vue组件中使用这个封装好的fetchAPI函数，可以...

			
		

	





	

		

			

				
					
JavaScript中的Promise使用详解

				
			

			

				

					10-24
				

			

		

		

			
				
回调函数的问题在于，当多个异步操作嵌套在一起时，代码结构会变得难以阅读和维护，这就是所谓的"回调地狱"。Promise通过链式调用和明确的状态管理，使异步代码更接近同步的代码结构，提高了代码的可读性和可维护性...

			
		

	





	

		

			

				
					
理解JavaScript中Promise的使用

				
			

			

				

					11-23
				

			

		

		

			
				
此外，`then` 返回一个新的 Promise，这使得我们可以链式调用多个处理函数，形成一个处理流程。如果需要处理进度信息，可以提供第三个参数作为进度回调，但这不是所有实现都支持的。  在 Promises/A 规范的基础上，...

			
		

	





	

		

			

				
					
浅谈JavaScript中promise的使用

				
			

			

				

					10-20
				

			

		

		

			
				
 - 当需要处理多个Promise并行执行的情况时，可以使用`Promise.all()`。它接收一个Promise数组作为参数，当所有Promise都变为fulfilled状态时，`Promise.all()`返回的Promise才会fulfilled，其结果是一个包含所有...

			
		

	





	

		

			

				
					
uniapp-request.zip-Promise方式封装uniapp请求

				
			

			

				

					06-24
				

			

		

		

			
				
本篇文章将深入探讨如何使用Promise和async/await来封装uniapp的网络请求，以提供更优雅的异步编程体验。  首先，让我们了解Promise。Promise是JavaScript中处理异步操作的一种方式，它代表了一个可能尚未完成但最终...

			
		

	





	

		

			

				
					
异步JavaScript：练习对外部API的多个异步调用

				
			

			

				

					02-17
				

			

		

		

			
				
此外，对于并行执行多个异步任务，我们可以利用`Promise.all`，它会等待所有提供的Promise都解决后才继续执行：  ```javascript async function fetchBothAPIs() {  try {  const [data1, data2] = await Promise....

			
		

	





	

		

			

				
					
Promise:一个简单的 JavaScript Promise 示例

				
			

			

				

					06-02
				

			

		

		

			
				
此外，`Promise.all`用于处理多个Promise的并行执行，它会返回一个新的Promise，只有当所有传入的Promise都fulfilled时才会fulfill，只要有任意一个rejected，整个Promise就会reject。例如：  ```javascript Promise...

			
		

	





	

		

			

				
					
promise和fetch

				
			

			

				

					runner_123的博客
				

				

					03-21
					
					711
					
				

			

		

		

			
				
1、promise

是一个对象，代表异步操作，有3种状态，pending\resolved\rejected

特点

（1）对象的状态不受外界影响

（2）一旦状态改变就不会再改变

构造一个promise实例


var mypromise = new Promise(function(resolve,reject){
      //...some code
      if(成功){
 ...

			
		

	





	

		

			

				
					
使用Promise.all()优化请求

				
			

			

				

					RedColinar的博客
				

				

					12-16
					
					5349
					
				

			

		

		

			
				
function fetchBox(param) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let box = {}
      box[param] = [1, 2, 3]
      resolve(box)
    }, 5000);
  })
}let params = ['apple

			
		

	





	

		

			

				
					
谈谈 Promise 以及实现 Fetch 的思路

				
			

			

				

					gg7894125的博客
				

				

					06-24
					
					866
					
				

			

		

		

			
				
Promise 是异步编程的一种解决方案。
Promise
/**

属性
*/
Promise.length
Promise.prototype

/**

方法
*/
Promise.all(iterable)   // 所有成功触发成功  任何失败触发失败
Promise.race(iterable)  // 任意一个成功或失败后触发
Promise.reject(reason)
Promise.resolve(value)

/**

原型
*/
Promise.prototype.construc

			
		

	





	

		

			

				
					
 如何使用Promise.all方法发送多个异步请求？

				
			

			

				

					03-23
				

			

		

		

			
				
使用Promise.all方法可以同时发送多个异步请求，并在所有请求都完成后获取它们的结果。下面是使用Promise.all方法发送多个异步请求的步骤：  1. 创建一个包含所有异步请求的数组，每个请求都返回一个Promise对象。 2...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值