js Promise+Jsonp跨域访问相关概念及案例

最新推荐文章于 2024-02-21 12:42:07 发布

kekechen丶

最新推荐文章于 2024-02-21 12:42:07 发布

阅读量337

点赞数

文章标签： javascript p2p 前端 ajax跨域问题

本文链接：https://blog.csdn.net/m0_63851202/article/details/121989449

版权

Promise

概念：promise是一个对象，promise里面保存着一个未来才会结束的事件的结果，它可以获取异步操作的消息，并且promise提供了统一的api，各种异步操作都可以用同样的方法进行处理。

写法：（通常用来操作请求响应事件）

注意：promise需要放在函数体内，promise需要作为函数的返回值

<script type="text/javascript">
	function fun() {
		let p = new Promise(function(success, reject) {
			if (2 > 1) {
				success()
			} else {
				reject()
			}
		})
		return p;
	}

	function s() {
		console.log("成功");
	}

	function r() {
		console.log("失败");
	}
	fun().then(s, r);
</script>

then方法

then（参数1，参数2），参数是两个回调函数，是实参，第一个参数是成功的方法，第二是是失败的方法，promise执行时成功则调用成功方法，失败则调用失败方法

then方法操作ajax：

<script type="text/javascript">
	function ajax(type, url, data, isA) {
		type = type.toLowerCase();
		let xhr = new XMLHttpRequest();
		if (type == "get") {
			let urlurl = url;
			if (data != "") {
				urlurl += "?" + data;
			}
			xhr.open(type, urlurl, isA);
			xhr.send();
		} else {
			xhr.open(type, url, isA);
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			xhr.send(data)
		}
		let p = new Promise(function(success, reject) {
			xhr.onreadystatechange = function() {
				if (xhr.status == 200 && xhr.readyState == 4) {
					success(xhr.responseText);
				} else if (xhr.readyState == 4) {
					reject();
				}
			}
		});
		return p;
	}

	function fun(res) {
		console.log(res);
	}

	function fun1() {
		console.log("响应失败")
	}
	ajax("get", "adadfs.php", "name=老王&id=12", true).then(fun, fun1);
</script>

all方法

all处理多个请求，等待所有请求完成后，同时返回所有请求结果，并将结果放置在一个数组中，如果多个请求中有一个执行了失败的方法，则直接返回失败

<script type="text/javascript">
	let p1 = new Promise(function(success, reject) {
		setTimeout(function() {
			success("p1")
		}, 1000);
	})
	let p2 = new Promise(function(success, reject) {
		setTimeout(function() {
			success("p2")
			// reject();
		}, 2000);
	})
	let p3 = new Promise(function(success, reject) {
		setTimeout(function() {
			success("p3")
		}, 3000);
	})

	function fun(res) {
		console.log(res);
	}

	function fun1() {
		console.log("失败")
	}
	Promise.all([p1, p2, p3]).then(fun, fun1)
</script>

结果：

['p1', 'p2', 'p3']

race方法

哪个响应快就执行谁，无论成功失败与否，找最快（结果不是数组）

<script type="text/javascript">
	let p1 = new Promise(function(success, reject) {
		setTimeout(function() {
			success("p1")
		}, 1000);
	})
	let p2 = new Promise(function(success, reject) {
		setTimeout(function() {
			success("p2")
			// reject();
		}, 2000);
	})
	let p3 = new Promise(function(success, reject) {
		setTimeout(function() {
			success("p3")
		}, 3000);
	})

	function fun(res) {
		console.log(res);
	}

	function fun1() {
		console.log("失败")
	}
	Promise.race([p1, p2, p3]).then(fun, fun1)
</script>

结果是