js promise

没有promise之前处理异步的方式
在promise产生之前,js 处理异步的方式是使用回调函数,一个回调函数执行完成,进行下一个回调函数。这样会导致层层嵌套,代码不清晰。容易进入回调地狱

promise 简介
promise的状态
promise 有三种状态  pending(进行中),resolved(成功),rejected(失败)

promise的状态是不可逆的

pending--->resolved 

或者

pending--->rejected

promise 的两个回调函数  resolved  rejected
promise 的参数是一个函数,函数里还有两个参数  resolved  rejected

resolved(res) 处理成功的 函数  它传递的参数 会在then方法里输出

rejected(err) 处理失败的函数  它传递的参数 会在 catch方法里输出

let p1 = new Promise((resolved, rejected) => {
  let randomVal = Math.random();
  if (randomVal > 0.5) {
    resolved(randomVal + "成功");
  } else {
    rejected(randomVal + "失败");
  }
})
  .then((res) => {
    console.log(res)//0.6423699367939153成功
  })
  .catch((err) => {
    console.log(err)//0.3423699367939153失败
  });

### JavaScriptPromise 的用法与示例 #### 什么是 PromisePromise 是一种用于处理异步操作的对象,它表示一个最终会完成或者失败的操作的结果。通过使用 Promise,可以更清晰地管理复杂的异步流程。 #### 基本结构 Promise 对象有三种状态:`pending`(等待)、`fulfilled`(已成功)和 `rejected`(已失败)。当 Promise 被执行时,其状态会从 `pending` 变为 `fulfilled` 或者 `rejected`[^1]。 以下是基本语法: ```javascript const myPromise = new Promise((resolve, reject) => { // 异步操作逻辑 if (/* 条件 */) { resolve(value); // 成功时调用 } else { reject(error); // 失败时调用 } }); ``` #### 使用 `.then()` 和 `.catch()` `.then()` 方法用于处理成功的回调,而 `.catch()` 则捕获错误并提供相应的处理机制。 ```javascript myPromise .then(result => console.log(`Success: ${result}`)) // 处理成功的情况 .catch(error => console.error(`Error: ${error.message}`)); // 处理失败的情况 ``` #### 链式调用 由于返回的是一个新的 Promise 实例,因此可以通过链式调用来简化多个异步操作的顺序执行。 ```javascript new Promise(resolve => setTimeout(() => resolve(1), 1000)) .then(val => val * 2) .then(val => val + ' is the result') .then(console.log); // 输出:"2 is the result" ``` #### 并行执行多个 Promise 如果需要同时启动多个异步任务,则可以使用 `Promise.all([])` 方法来等待所有的 Promise 完成后再继续下一步。 ```javascript Promise.all([ fetch('/api/data1').then(response => response.json()), fetch('/api/data2').then(response => response.json()) ]) .then(([data1, data2]) => { console.log(data1, data2); }) .catch(err => console.error('An error occurred:', err)); ``` #### 错误处理的最佳实践 为了更好地控制异常传播路径,在设计复杂的应用程序时应始终考虑如何优雅地处理潜在的错误情况。 ```javascript function fetchData(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = () => (xhr.status === 200 ? resolve(xhr.responseText) : reject(new Error('Failed'))); xhr.onerror = () => reject(new Error('Network Error')); xhr.send(); }); } fetchData('/some/valid/url') .then(data => JSON.parse(data)) .then(processedData => console.log(processedData)) .catch(e => alert(e.message)); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值