潍坊网站建设怎样,郑州中森网站建设,网站设置支付宝在线支付,工作不好找怎么办文章目录 前言一、关于 Promise 的理解与使用1.相关知识补充区别实例对象和函数对象同步回调异步回调Js中的错误#xff08;error#xff09;和错误处理 2.promise是什么 二、Promise 原理三、Promise 封装 Ajax四、async 与 await总结 前言
在项目中#xff0c;promise的使… 文章目录 前言一、关于 Promise 的理解与使用1.相关知识补充区别实例对象和函数对象同步回调异步回调Js中的错误error和错误处理 2.promise是什么 二、Promise 原理三、Promise 封装 Ajax四、async 与 await总结 前言
在项目中promise的使用是必不可少的本文主要记录了异步编程中promiseasync 与 await相关知识。 一、关于 Promise 的理解与使用
1.相关知识补充
区别实例对象和函数对象
实例对象通过 new 创建的对象称实例对象。函数对象将函数作为对象使用时简称函数对象。
同步回调
立即执行全部执行完了才结束不放入回调队列中。如数组遍历相关的回调函数promise的excutor函数new Promise(executor)
异步回调
不会立即执行会放入回调队列中以后执行。如定时器回调、Ajax回调、promise 的成功/失败回调。
Js中的错误error和错误处理 1.错误类型 Error所有错误的父类型ReferenceError引用的变量不存在TypeError数据类型不正确RangeError数据值不在其所允许的范围内SyntacticError语法错误 2.错误处理 捕获错误try{ } catch(){ }抛出错误throw error 3.错误对象 message 属性错误相关信息stack属性记录信息 2.promise是什么
1.简介
promise 是一个ES6语法专门用来解决异步 回调地狱 的问题。promise 规范规定了一种异步编程解决方案的API。规范规定了promise对象的状态和then方法。promise 是一个内置的构造函数是程序员自己new 调用的。promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值。 回调地狱 当一个回调函数嵌套一个回调函数的时候出现一个嵌套结构嵌套多了就会出现回调地狱的情况。 2.语法
Promise.prototype.then 方法new Promise(executor) 构造函数new Promise的时候传入一个回调函数它是同步的回调会立即在主线程上执行称为executor函数executor 会接收两个参数resolve, reject 1调用 resolve会让promise实例状态变为成功(fulfilled),同时可以指定成功的 value。 2调用 reject会让promise实例状态变为失败rejected同时可以指定失败的 reason
const p new Promise((resolve, reject) {resolve(ok)})
console.log(,p)//demo一般不在控制台输出一个 Promise 必然处于以下几种状态之一 pending初始状态既没有被兑现也没有被拒绝。fulfilled意味着操作成功完成。rejected意味着操作失败。 const p new Promise((resolve, reject) {setTimeout(() {rejected(test错误信息)resolve(test成功数据);}, 1000);
});p.then(data console.log(成功, resolve, data),//成功data console.log(失败, reject, data)//失败
);// 执行结果
1s后打印 成功 resolve test成功数据二、Promise 原理
-Promise 对象被创建时它处于 pending 状态。当异步操作成功完成时它变为 fulfilled 状态当异步操作失败时它变为 rejected 状态。而且一旦状态改变就不能再改变。 当其中任意一种情况发生时通过 Promise 的 then 方法串联的处理程序将被调用。如果绑定相应处理程序时 Promise 已经兑现或拒绝这处理程序将被立即调用因此在异步操作完成和绑定处理程序之间不存在竞态条件。
如果一个 Promise 已经被兑现或拒绝即不再处于待定状态那么则称之为已敲定settled。
Promise 提供了统一的 API 各种异步操作都可以用同样的方法进行处理。这使得代码更加简洁和易于理解。
三、Promise 封装 Ajax
function fetchData(url) { return new Promise((resolve, reject) { // 创建一个 XMLHttpRequest 对象 let xhr new XMLHttpRequest(); // 监听请求完成事件 xhr.addEventListener(load, function() { if (xhr.status 200) { // 请求成功 // 将返回的数据作为 Promise 的结果 resolve(xhr.responseText); } else { // 请求失败 // 将错误信息作为 Promise 的结果 reject(new Error(Request failed with status ${xhr.status})); } }); // 监听请求错误事件 xhr.addEventListener(error, function() { reject(new Error(Request failed)); }); // 发送请求 xhr.open(GET, url, true); xhr.send(); });
}四、async 与 await Promise虽然解决了回调地狱问题但是缺点是有不少的样板代码并且写代码时候还是通过then注册回调方式 async、await是语法糖async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为。 总结
promise 常用语法Promise.prototype.then、new Promise(executor)promise 三种状态pending、resolve、 reject
