轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
猜你喜欢
查看: 6858|回复: 0

ajax和promise的结合使用方法分享

[复制链接]

0

主题

0

帖子

1万

积分

钻石会员

Rank: 8Rank: 8

积分
17452
QQ
发表于 2020-6-22 10:30 | 显示全部楼层 |阅读模式
本文主要和大家分享ajax和promise的结合使用方法,在需要依赖完成的ajax请求可使用promise保证执行顺序 在第一个请求正确返回后再发送第二个请求。希望能帮助到大家。

/*
  定义一个使用promise的ajax请求,这里依赖jquery
  参数中请求url为必填参数
*/
const ajaxPromise=  param => {
  return new Promise((resovle, reject) => {
    $.ajax({
      "type":param.type || "get",
      "async":param.async || true,
      "url":param.url,
      "data":param.data || "",
      "success": res => {
        resovle(res);
      },
      "error": err => {
        reject(err);
      }
    })
  })
}

/*
   第一个请求
*/
let step1 = () => {
    ajaxPromise({
      "url":"",
    }).then(res => {
        console.log("第一个请求正确返回==>"+res);  
        step2(res);  
    }).catch(err => {
        console.log("第一个请求失败");  
    })
}

/*
   第二个请求
*/
let step2 = (res) => {
    ajaxPromise({
      "type":"get",
      "url":"",
      "data":{"name":res}
    }).then(res => {
        console.log("第二个请求正确返回==>"+res);  
    }).catch(err => {
        console.log("第二个请求失败==>"+err);  
    })
}

step1();

原生js写ajaxpromise对象

const ajaxPromise =  param => {
  return new Promise((resovle, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open(param.type || "get", param.url, true);
    xhr.send(param.data || null);

    xhr.onreadystatechange = () => {
     var DONE = 4; // readyState 4 代表已向服务器发送请求
     var OK = 200; // status 200 代表服务器返回成功
     if(xhr.readyState === DONE){
      if(xhr.status === OK){
        resovle(JSON.parse(xhr.responseText));
      } else{
        reject(JSON.parse(xhr.responseText));
      }
     }
    }
  })
}

关于promise使用时的几点:

  1. 使用方法:先创建一个promise对象new Promise(),根据业务需求判断执行成功或失败,成功调用resovle(),失败则调用reject()。

  2. Promise对象的then(onFulfilled,onRejected)有两个参数,成功执行onFulfilled,失败执行onRejectd

    p.then(function(value) {
       // fulfillment成功
      }, function(reason) {
      // rejection失败
    });
    
    //不过通常会使用catch()来捕获失败,上段代码通常写为:
    p.then(function(value) {
        // fulfillment成功
    }).catch(function(reason) {
        //rejection失败
    })
  3. Promise对象的then()会返回一个新的Promise对象

回复

使用道具 举报

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

客服QQ点击咨询

关注抖音号

定期抽VIP

Copyright © 2016-2019 https://www.qingyuanma.com/ 鲁ICP备17014494号

快速回复 返回顶部 返回列表