用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("网络异常"));
        }
    })
}
相关文章
|
1月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
3月前
|
存储 前端开发
PROMISE解决AJAX中的串行和并行
PROMISE解决AJAX中的串行和并行
29 0
|
4月前
|
前端开发 Java
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
34 0
|
5月前
|
前端开发 JavaScript API
Promise封装Ajax请求
Promise封装Ajax请求
29 0
|
5月前
|
JavaScript 前端开发 API
vue项目中配置简单的代理与promise,并简单封装请求接口
vue项目中配置简单的代理与promise,并简单封装请求接口
24 0
|
5月前
|
小程序 前端开发 API
小程序api封装 promise使用
小程序api封装 promise使用
32 0
|
7月前
|
前端开发 JavaScript
js - 封装ajax
简单封装/使用promise封装ajax/封装:$.ajax()
|
5月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
38 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
57 0
|
4月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤