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));
          }
         }
        }
      })
    }
    

      

  • 相关阅读:
    chapter01 Bob'store
    echo拼接
    《PHP和MySql Web》书,<input>属性
    http协议
    asc18_hpl,hpc,hpcg
    考研北邮总结[转发共享]
    考研经验总结【转发共享】
    ISBN号码 201312-2
    出现次数最多的数 201312-1
    相反数 201403-1
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/10345108.html
Copyright © 2011-2022 走看看