用Promise简单封装一个Axios

最新推荐文章于 2024-07-02 09:18:35 发布

AllenMMMMM

最新推荐文章于 2024-07-02 09:18:35 发布

阅读量848

点赞数 1

文章标签： javascript 前端 es6

本文链接：https://blog.youkuaiyun.com/AllenMMMMM/article/details/120881494

版权

本文介绍了Promise的基础和XMLHttpRequest的重要属性，重点讨论了如何使用Promise封装Axios库，并详细阐述了HTTP的各种状态码及其含义，帮助开发者更好地理解和处理HTTP请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise 的基础功能

原生

const promise = new Promise((resolve, reject) => {
   resolve('success')
   reject('err')
})

promise.then(value => {
  console.log('resolve', value)
}, reason => {
  console.log('reject', reason)
})

// 输出 resolve success

XMLHttpRequest 对象的三个重要的属性：

1.onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

2.readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

3.status：Http请求状态

封装Axios

function myaxios(url) {
             let p1 = new Promise((resolve,reject) =>{
                 let xhr = new XMLHttpRequest() || ActiveXObject("Micsoft.XMLHTTP")
                 xhr.open("GET",url,true)
                 xhr.send()
                 xhr.onreadystatechange = function(){
                     //每当 readyState 改变时，就会触发 onreadystatechange 事件。
                     if(xhr.readyState == 4){
                         if(xhr.status == 200){
                            resolve(xhr.responseText)
                         }else if(xhr.status >= 400){
                            reject(xhr.responseText)
                         }
                     }
                 }
             })
         }