es6异步请求有哪些状态
更新时间:2023-10-19
在ES6中,异步请求共有三种状态,分别为pending(进行中)、resolved(已完成)和rejected(已失败)。这三种状态分别代表了不同的请求进展阶段,从而使得代码的执行能够更加精确和有条理。下面将分别介绍这些状态的含义和在代码当中的用法。
## 1. pending状态
当我们发起一个异步请求时,代码执行的第一步就是进入pending状态。这个状态下的请求即是处于等待状态,等待后端服务器对我们的请求进行响应。我们可以使用Promise对象来包装异步请求的代码,并在Promise的构造函数当中定义响应函数,从而实现代码的分步执行。
```html
示例:在Promise中封装异步请求
let promise = new Promise((resolve, reject) => { let xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.example.com/api/data', true); xhr.onreadystatechange = () => { if(xhr.readyState === 4) { if(xhr.status === 200) { resolve(xhr.response); } else { reject('Error: ' + xhr.statusText); } } } xhr.send(); });在上方代码当中,我们首先创建一个Promise对象,使用XMLHttpRequest对象发起GET类型的请求。当请求状态改变时,我们会调用onreadystatechange处理函数,该函数主要进行请求状态的判断,并对请求进行响应。这一步中的状态即为pending状态,因为请求仍在等待后端服务器的响应。 ## 2. resolved状态 当后端服务器对我们的请求做出响应时,请求的状态就会从pending转变为resolved状态。在resolved状态下,我们可以通过调用.then() 方法来获取服务器返回的数据,并对返回数据进行相应的处理和解析。 ```html
示例:在resolved状态下解析返回数据
promise.then((res) => { console.log('请求已响应:' + res); });在上方代码当中,我们调用Promise对象的.then() 方法来接收已响应的数据,并使用console.log()方法将其输出到控制台中。这时我们就可以在已响应状态下对返回的数据进行进一步处理和解析。 ## 3. rejected状态 有时候,由于请求过程中网络环境或者其他异常情况的影响,请求有可能会失败。这时javascript引擎会捕获这些异常,并将请求的状态转换为rejected状态。在该状态中,我们可以通过.catch()方法来捕捉这些异常,并对它们进行相应的处理和反馈。 ```html
示例:在rejected状态下处理异常
promise.catch((err) => { console.error(err); });在上方代码当中,我们使用.catch() 方法来捕获请求过程中出现的异常,并使用console.error() 方法将异常信息输出到控制台中。这时我们就可以在rejected状态下对异常进行进一步处理和反馈。 ## 4. 总结 在ES6中,异步请求进行的过程中共有三种状态,分别为pending、resolved和rejected。其中pending状态代表了请求正在等待后端服务器的响应,resolved状态代表了我们已经从服务器获取到了返回数据,rejected状态则代表了请求过程中出现了异常情况。通过对异步请求状态的分析和处理,我们可以更加有效的控制请求的进展,从而实现更加精确和高效的代码编写。