用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请求
53 0
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
65 1
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
68 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
142 0
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
44 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
3月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
31 0