用promise封装ajax

简介: 用promise封装ajax

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

var onSuccess = function(result){
   }; //成功的回调
var onFail = function(error){
   }; //失败的回调
var req = new XMLHttpRequest();
req.open("POST", "www.baidu.com", true); // true  是否异步
req.onload = function(){
   
  if(req.readyState === 4 && req.status === 200){
   
    onSuccess(req.response);
  } else {
   
    onFail(req.statusText);
  }
}
req.onerror = function(){
   
  onFail(Error("网络异常"));
}
function ajaxPrpmise () {
   
   let promise = new Promise( (resolve,reject) => {
   
              let xhr =  new XMLHttpRequest();
              xhr.open('get',''xx.gif',true)
              xhr.onreadystatechange = () =>{
    
                        if( xhr.readyState === 4 ){
   
                             if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 ){
   
                                 resolve( xhr.responseURL)
                             } else {
   
                                 reject( new Error(xhr.statusText))
                             }
                        }
              }

           xhr.send(null)
   } )
  return promise
}

参考: https://www.bilibili.com/video/BV1jv411P7Hp/?spm_id_from=333.788

const ajax = url => {
   
    return new Promise((resolve, reject) => {
   
        let req = new XMLHttpRequest();
        req.open("POST", url, true);
        req.onload = () => {
   
          if(req.readyState === 4 && req.status === 200){
   
            resolve(req.response);
          } else {
   
            reject(req.statusText);
          }
        }
        req.onerror = () => {
   
          reject(Error("网络异常"));
        }
    })
}
相关文章
|
6月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
6月前
|
前端开发
用Promise对象实现的 Ajax
用Promise对象实现的 Ajax
37 0
|
6月前
|
存储 前端开发
PROMISE解决AJAX中的串行和并行
PROMISE解决AJAX中的串行和并行
53 0
|
6月前
|
前端开发 Java
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
55 0
|
前端开发 JavaScript API
Promise封装Ajax请求
Promise封装Ajax请求
54 0
|
6月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
65 1
|
6月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
99 4
|
6月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
5月前
|
前端开发 JavaScript 开发者
JavaScript进阶-Promise与异步编程
【6月更文挑战第20天】JavaScript的Promise简化了异步操作,从ES6开始成为标准。Promise有三种状态:pending、fulfilled和rejected。基本用法涉及构造函数和`.then`处理结果,如: ```javascript new Promise((resolve, reject) =&gt; { setTimeout(resolve, 2000, &#39;成功&#39;); }).then(console.log); // 输出: 成功
86 4
|
6月前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
89 0