promise封装ajax_prmose封装原生ajax的思路-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45910045/article/details/109653504

本文介绍了如何使用Promise来封装AJAX，包括JQAjax结合Promise的方法，以及基于Promise的fetch API实例。同时，探讨了ES7中的async和await特性，提供了使用这些特性封装的fetch API的异步解决方案，以实现更优雅的异步编程。并给出了app.js调用封装接口及两个不同版本的easyhttp.js代码示例。

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

promise封装ajax

var baseUrl = "http://120.76.31.111/app/XhlGetSubjectTypeList";
			 function getData(url){
			 	return new Promise(function(resolve,reject){
			 		var xhr = new XMLHttpRequest();
			 			xhr.open("GET",url);
			 			xhr.send();
			 			xhr.addEventListener("readystatechange",function(){
			 				if(xhr.readyState==4){//状态值
			 					if (xhr.status==200) {//响应成功
			 						var res=JSON.parse(xhr.responseText);
			 						resolve(res);
			 					}else{
			 						reject("请求数据失败")
			 					}
			 					
			 				}
			 			})
			 	})
			 }getData(baseUrl)
			 .then(function(res){
			 	console.log(res);
			 },function(err){
			 	console.log(err);
			 })

JQAjax+Promise封装方法

var  param = {
    index_1: 1
};

var ajax = function (methods, url, param) {

    return new Promise(function (resolve, reject) {
        $.ajax({
            type: methods,
            url: url,
            data: param,
            dataType: "json",
            success: function (data) {
                resolve(data);
            },
            error: function (error) {
                reject(error)
            }
        });
    }
    )
};
var con = "";
ajax("GET", 'data.json', param).then(function (res) {  
 // 启动第一个任务
 // 处理第一个异步任务的结果(每次调用then都会返回一个新创建的Promise对象
    // console.dir(res[1].name);

    $.each(res, function (ket, val) {
        con += "<label>姓名：" + val.name + "</label><br/>"
    });
    $("#div1").html(con);

    var param2 = res[0];
    return ajax('GET', 'data2.json', param2);       // 启动第二个任务
}).then(function (data2) {                          //处理第二个异步任务的结果
    // console.log(data2[0].name);
    var name = "<label>姓名：" + data2[0].name + "</label>";

    $("#div2").html(name);
});

基于Promise async实例封装fetch Apis实例

async和await是es7中提出来的更加优雅的一种异步编程解决方案。
Fetch API提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
下面是app.js调用封装好的接口

const http = new EasyHttp;

// get请求数据
http.get("http://jsonplaceholder.typicode.com/users")
       .then((data) => {
         console.log(data);
       })
      .catch(err => console.log(err))

下面是基于promise封装的easyhttp.js


 class EasyHttp{
   // get 
   get(url){
     return new Promise((resolve,reject) => {
        fetch(url)
          .then(res => res.json())
          .then(data => resolve(data))
          .catch(err => reject(err))
     })
   }

   // post
   post(url,data){
    return new Promise((resolve,reject) => {
       fetch(url,{
         method:"POST",
         headers:{
           'Content-type':'application/json'
         },
         body:JSON.stringify(data)
       })
         .then(res => res.json())
         .then(data => resolve(data))
         .catch(err => reject(err))
    })
  }

  // put
  put(url,data){
    return new Promise((resolve,reject) => {
       fetch(url,{
         method:"PUT",
         headers:{
           'Content-type':'application/json'
         },
         body:JSON.stringify(data)
       })
         .then(res => res.json())
         .then(data => resolve(data))
         .catch(err => reject(err))
    })
  }

  // delete
  delete(url){
    return new Promise((resolve,reject) => {
       fetch(url,{
         method:"DELETE",
         headers:{
           'Content-type':'application/json'
         }
       })
         .then(res => res.json())
         .then(data => resolve('数据删除成功!'))
         .catch(err => reject(err))
    })
  }
 }

下面是基于async和await封装的easyhttp.js2.0版本


 class EasyHttp{
   // get 
   async get(url){
     const response = await fetch(url);
     const resData = await response.json();
     return resData;
   }

   // post
   async post(url,data){
      const response = await fetch(url,{
         method:"POST",
         headers:{
           'Content-type':'application/json'
         },
         body:JSON.stringify(data)
       });
      const resData = await response.json();
      return resData;
  }

  // put
  async put(url,data){
      const response = await fetch(url,{
         method:"PUT",
         headers:{
           'Content-type':'application/json'
         },
         body:JSON.stringify(data)
       });

       const resData = await response.json();
       return resData;    
  }

  // delete
  async delete(url){
      const response = await fetch(url,{
        method:"DELETE",
        headers:{
          'Content-type':'application/json'
        }
      })
      const resData = await "数据删除成功!";
      return resData;
  }
 }