Promise相关（ajax/fetch/axios）

最新推荐文章于 2023-05-27 11:55:56 发布

『九离~空白』

最新推荐文章于 2023-05-27 11:55:56 发布

阅读量209

点赞数 1

分类专栏： vue2.x ，vue_cli javascript，es6 文章标签： ajax js vue

本文链接：https://blog.csdn.net/qq_44722915/article/details/105950134

版权

javascript，es6 同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

vue2.x ，vue_cli

34 篇文章 2 订阅

订阅专栏

本文深入讲解Promise的概念，解决回调地狱问题，以及如何在JavaScript中使用Promise处理异步操作，包括定时任务、Ajax请求和时间函数。同时，介绍了基于Promise处理Ajax请求的方法，以及then参数中的函数返回值对后续then调用的影响。

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

概念:

Promise是异步编程的一种解决方案，从语义上讲，Promise是一对象。从它可以获取异步操作的消息;主要解决回调地狱问题。

异步调用 (JS层面):

--->定时任务
--->Ajax
--->时间函数

基础用法:

-->实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务;
resolve和reject两个参数用于处理成功和失败的两种情况，并通过p.then获取处理结果;
var p = new Promise(function(resolve,reject){
				//成功时调用resolve()
				//失败时调用reject()
			});
			p.then(function(ret){
				//从resolve得到正常结果
			},function(ret){
				//从rejecty得到错误信息
			})

基于Promise处理Ajax请求:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基于Promise处理Ajax请求</title>
	</head>
	<body>

		<script>
			/* 
			  基于Promise处理Ajax请求--处理原生Ajax 
			 */
			function queryData(url) {
				var p = new Promise(function(resolve, reject) {
					var xhr = new XMLHttpRequest();
					xhr.onreadystatechange = function() {
						if (xhr.readyState != 4) {
							return;
						}
						if (xhr.readyState == 4 && xhr.status == 200) {
							resolve(xhr.responseText);
						} else {
							reject("服务器出错！");
						}

					}
					xhr.open("get", url);
					xhr.send(null);
				});
				return p;
			}

			/* queryData("test.txt").then(function(data){
				console.log(data);
			},function(info){
				console.log(info);
			}); */

			//=====================================
			//发送多个Ajax请求,并且保证顺序
			queryData("test.txt").then(function(data) {
				console.log(data);
				return queryData("test1.txt");//return新的Promise对象
			}).then(function(data) {
				console.log(data);
				return queryData("test2.txt");
			}).then(function(data) {
				console.log(data);
			});
		</script>
	</body>
</html>

then参数中的函数返回值:

返回Promise实例对象 -->返回的该实例对象 return p; 会调用下一个then,then参数为then(data)---上一个Promise对象的值
返回普通值 -->返回的普通值 return X;传递给下一个then,then(X)---参数为这个普通值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>then参数中的函数返回值</title>
	</head>
	<body>
		
		<script>
			/* 
			 then参数中的函数返回值
			 
			 1,返回Promise实例对象
			 -->返回的该实例对象 return p; 会调用下一个then,
			 then参数为then(data)---上一个Promise对象的值
			 
			 2,返回普通值
			 -->返回的普通值 return X;
			 传递给下一个then,then(X)---参数为这个普通值
			 
			 */
			
			function queryData(url){
				var p = new Promise(function(resolve,reject){
					var xhr = new XMLHttpRequest();
					xhr.onreadystatechange = function(){
						if(xhr.readyState != 4){
							return;
						}
						if(xhr.readyState==4&&xhr.status==200){
							resolve(xhr.responseText);
						}else{
							reject("服务器出现错误！");
						}
					}
					xhr.open("get",url);
					xhr.send(null);
				});
				return p;
			}
			
			queryData("test.txt").then(function(data){
				return queryData("test1.txt");//返回一个Promise对象
			}).then(function(data){//data=前一个data
				return "hello";//返回一个普通值
			}).then(function(data){//data="hello"
				console.log(data);//"hello"
			})
		</script>
	</body>
</html>

Promise常用的API:

实例方法（原型中的方法）

p.then()-->得到异步任务的正确结果

p.catch()-->获取异常信息
p.finally()-->成功与否都会执行（尚且不是正是标准）

对象方法

-->Promise.all()-->并发的处理多个异步任务，所有任务都执行完才能得到结果

-->Promise.race()-->并发处理多个异步任务，只要一个任务完成就能得到结果
-->resolve和reject...

接口调用-fetch 用法:

基本特性

-->更加简单的数据获取方式，功能更强大，更灵活，可以看做是xhr的升级版

-->基于promise实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>接口调用-fetch</title>
	</head>
	<body>
		
		<script>
			/*
			 接口调用-fetch 用法
			 1,基本特性
			 -->更加简单的数据获取方式，功能更强大，更灵活，可以看做是xhr的升级版
			 -->基于promise实现 

			 fetch请求参数
			 1,常用配置选项
			 -->methos(String):HTTP请求方式。默认GET（GET,POST,PUT,DELETE）
			 -->body(String):HTTP请求参数(post和put)
			 -->headers(Object):HTTP的请求头，默认{}(post和put)
					 body:"uname=wuhao&pwd=123456",
					 headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					 }
					===================================== 
					 body:JSON.stringfy({
						uname:wuhao,
						pwd:123456
					 }),
					 headers:{
						'Content-Type':'application/json'
					 } 
			 2,响应数据格式
			 -->text():将返回体处理成字符串类型
			 -->json():返回结果和JSON.parse(reponseText)一样
			 
			 */
			fetch("test.php").then(function(data){
				return data.text();//返回一个promise实例对象，其中.text()是fetch的一部分
			}).then(function(data){
				console.log(data);
			});
		</script>
	</body>
</html>

接口调用-axios用法:

基本特性
           axios是一个基于Promise用于浏览器和node.js的HTTP客户端
           -->支持浏览器和node.js
           -->支持promise
           -->能拦截请求和响应
           -->自动转换JSON数据

axios的常用API
           -->get:查询数据
           GET传递参数：
               -->Restful形式的UR /
               -->传统形式的URL ?
               -->通过params

           -->post:添加数据
               POST传参方式
               -->通过选项传递参数{},默认传递的是json格式的数据
               -->通过URLSearchParams传递参数（application/x-www-form-urlencoded）


           -->put:修改数据
           PUT传参方式
               -->通过选项传递参数{},默认传递的是json格式的数据
               -->通过URLSearchParams传递参数（application/x-www-form-urlencoded）

           -->delete:删除数据
               DELETE传递参数：
               -->传统形式的URL ?
               -->Restful形式的UR /
               -->通过params;
axios的响应结果
           响应结果的主要属性
           -->data:实际响应回来的数据
           -->headers:响应头信息
           -->status:响应状态码
           -->statusText:响应状态信息;

实例链接

接口调用-async/await用法：

async/await的基本用法
           -->async/await是ES7引入的新语法，可以更加方便的进行异步操作
           -->async关键字用于函数上(async函数的返回值是Promise实例对象)
           -->await关键字用于async函数当中(await可以得到异步的结果);可以跟一个Promise实例对象；
async function queryData(id){
				const ret = await axios.get("../test.php");
				return ret;
			}
			
			queryData.then(function(ret){
				console.log(ret);
			})

//async/await处理多个异步请求
			
			async function queryData1(){
				var info = await axios.get("async1");
				var ret = await axios.get("async2?info="+info.data);
				return ret.data;
			}
					
			queryData1().then(data=>{
				console.log(data);
			})

实例链接