zoukankan      html  css  js  c++  java
  • 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));
          }
         }
        }
      })
    }
    

      

  • 相关阅读:
    DHCP工作过程
    园区网——网络架构
    ARP协议
    网络拓扑结构设计+网络设备简介
    Linux- 常用命令
    Linux-FTP
    【noip2018】【luogu5021】赛道修建
    【noip2018】【luogu5024】保卫王国
    【codeforces】【Round#523D】TV shows
    【bzoj4810】【ynoi2018】由乃的玉米田
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/10345108.html
Copyright © 2011-2022 走看看