js中的promiseapp开发定制是一个的解决方案,app开发定制语法层面上他是一个构造函数,名字为Promise()。
app开发定制他的作用就是将一个任务taskapp开发定制封装为一个Promise类的实例对象,这个对象会将任务自动运行并得到任务结果,而且在得到结果的过程中并不会影响到其他任务的进行。由此实现多个任务的并发进行。
实现异步的过程被隐藏在Promise类的实现过程中,我们只需要将任务交给Promise,Promise给我们一个instance,之后通过instance去拿任务结果就可以了。我们可以创建多个Promise类的实例instance。
下面将介绍Promise用法的一般代码写法。
目录
1,Promise构造函数参数介绍
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。resolve和reject是两个函数,由JavaScript引擎提供,不用自己部署。
- //resolve, reject名称不能修改
- const promise = new Promise(function(resolve, reject) {
- // ...some code
- if ( /*异步操作成功,执行resolve方法,目的一般是将某些结果返回出去*/ ) {
- resolve(value);
- } else {
- /*异步操作失败,执行reject方法,目的一般也是将某些结果返回出去*/
- reject(error);
- }
- });
2,Promise实例对象的then()方法
Promise 实例生成以后,可以用then方法分别指定resolved状态和rejected 状态的回调函数。也就是对返回的任务结果进行处理。
- promise.then(resolved = function(value) {
- // success,对返回的结果value进行处理
- },
- rejected = function(error) {
- //failure,直接把错误类型报给用户
- });
3,异步加载图片的例子
- <!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>异步加载图片</title>
- </head>
-
- <body>
- <div id="box"></div>
- <script>
- box = document.getElementById('box');
-
- function loadImageAsync(url) {
- /*创建一个image资源对象,因为要网络请求,比较消耗时间***********************/
- function task(resolve, reject) {
- const image = new Image();
- image.src = url;
- //onload等于true
- image.onload = function() {
- resolve(image);
- };
- //onerror等于false
- image.onerror = function() {
- reject(new Error(' could not load image at ' + url));
- };
-
- }
- return new Promise(task);
- }
-
- promise = loadImageAsync('https://pan.baidu.com/box-static/disk-theme/theme/white/img/logo@2x.png');
- promise.then(
- function(data) {
- box.appendChild(data);
- },
- function(error) {
- box.innerHTML = '图片加载失败';
- console.log(error);
- }
- )
- </script>
- </body>
-
- </html>
4,Ajax实操
- <!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>ajax实操</title>
- </head>
-
- <body>
- <div id="box"></div>
- <script>
- box = document.getElementById('box');
-
- function GETJSON(url) {
- /*************************************************************/
- function ajaxTask(resolve, reject) {
- const handler = function() {
- if (this.readystate !== 4) {
- return;
- }
- if (this.status === 200) {
- resolve(this.response);
- } else {
- reject(new Error(this.statusText));
- }
- };
- const client = new XMLHttpRequest();
- client.open("GET", url);
- client.onreadystatechange = handler;
- client.responseType = "json";
- client.setRequestHeader("Access-Control-Allow-Origin", "*");
- client.send();
- }
- /*************************************************************/
- return new Promise(ajaxTask);
- };
- /*************************************************************/
- promise = GETJSON("https://www.hupu.com/home/v1/news?pageNo=4&pageSize=50");//出现ajax无法跨域的问题,目前还不会解决
-
- promise.then(
- function(data) {
- console.log(data);;
- },
- function(error) {
- box.innerHTML = '加载失败';
- console.log(error);
- }
- )
- </script>
-
- </body>
-
- </html>