首页 >> js开发 >> jses6中Promise 对象基本功能与用法实例分析js大全
jses6中Promise 对象基本功能与用法实例分析js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了es6中Promise 对象基本功能与用法。分享给大家供大家参考，具体如下：Promise 是异步编程的一种解决方案，解决——回调函数和事件ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。下面代码创造了一个Promise实例。基本用法基本用法ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。
const promise = new Promise(function(resolve, reject) {
//resolve （data）
成功
//reject
（error ）失败
});
const promise = new Promise(function(resolve, reject) {
//resolve （data）
成功
//reject
（error ）失败
});
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// err
});
promise.then(function(value) {
// success
}, function(error) {
// err
});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。下面是一个Promise对象的简单例子
function fun(ms){
return new promise((res,rej) => {
setTimeout(res,ms)
})
}
fun(100).then((val) => {
console.log(val)
})
function fun(ms){
return new promise((res,rej) => {
setTimeout(res,ms)
})
}
fun(100).then((val) => {
console.log(val)
})
promise还可以用来加载图片
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
上面代码中，使用Promise包装了一个图片加载的异步操作。如果加载成功，就调用resolve方法，否则就调用reject方法。2，用Promise对象实现的 Ajax 操作的例子。
const getJSON = function(url) {
const promise = new Promise(function(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("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
const getJSON = function(url) {
const promise = new Promise(function(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("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
注意，调用resolve或reject并不会终结 Promise 的参数函数的执行。Promise.prototype.finally()Promise.prototype.finally()finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2021 引入标准的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
上面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数,finally本质上是then方法的特例。Promise.resolve()Promise.resolve()
//有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。
const jsPromise = Promise.resolve($.ajax('/whatever.json'));
//有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。
const jsPromise = Promise.resolve($.ajax('/whatever.json'));
上面代码将 jQuery 生成的deferred对象，转为一个新的 Promise 对象。Promise.resolve等价于下面的写法。
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
//Promise.resolve方法的参数分成四种情况。
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
//Promise.resolve方法的参数分成四种情况。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》JavaScript操作DOM技巧总结JavaScript页面元素操作技巧总结JavaScript事件相关操作与技巧大全JavaScript查找算法技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript错误与调试技巧总结希望本文所述对大家JavaScript程序设计有所帮助。
const promise = new Promise(function(resolve, reject) {
//resolve （data）
成功
//reject
（error ）失败
});
const promise = new Promise(function(resolve, reject) {
//resolve （data）
成功
//reject
（error ）失败
});
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// err
});
promise.then(function(value) {
// success
}, function(error) {
// err
});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。下面是一个Promise对象的简单例子
function fun(ms){
return new promise((res,rej) => {
setTimeout(res,ms)
})
}
fun(100).then((val) => {
console.log(val)
})
function fun(ms){
return new promise((res,rej) => {
setTimeout(res,ms)
})
}
fun(100).then((val) => {
console.log(val)
})
promise还可以用来加载图片
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
上面代码中，使用Promise包装了一个图片加载的异步操作。如果加载成功，就调用resolve方法，否则就调用reject方法。2，用Promise对象实现的 Ajax 操作的例子。
const getJSON = function(url) {
const promise = new Promise(function(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("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
const getJSON = function(url) {
const promise = new Promise(function(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("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
注意，调用resolve或reject并不会终结 Promise 的参数函数的执行。Promise.prototype.finally()Promise.prototype.finally()finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2021 引入标准的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
上面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数,finally本质上是then方法的特例。Promise.resolve()Promise.resolve()
//有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。
const jsPromise = Promise.resolve($.ajax('/whatever.json'));
//有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。
const jsPromise = Promise.resolve($.ajax('/whatever.json'));
上面代码将 jQuery 生成的deferred对象，转为一个新的 Promise 对象。Promise.resolve等价于下面的写法。
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
//Promise.resolve方法的参数分成四种情况。
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
//Promise.resolve方法的参数分成四种情况。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》JavaScript操作DOM技巧总结JavaScript页面元素操作技巧总结JavaScript事件相关操作与技巧大全JavaScript查找算法技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript错误与调试技巧总结希望本文所述对大家JavaScript程序设计有所帮助。
相关文章:
- js通过实例解析chrome如何在mac环境中安装vue-devtools插件js大全
- js详解element-ui 表单校验 Rules 配置 常用黑科技js大全
- jsuniapp,微信小程序中使用 MQTT的问题js大全
- JavaScript基于原生js实现判断元素是否有指定class名
- jsVSCode 配置uni-app的方法js大全
- jsElement图表初始大小及窗口自适应实现js大全
- jsJquery使用each函数实现遍历及数组处理js大全
- js简单了解Vue computed属性及watch区别js大全
- JavaScriptThreejs实现滴滴官网首页地球动画功能
- js代码详解JavaScript匿名函数和闭包
刚刚发布热门点击发布时间
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
