封装后的POST请求的内部函数返回值如何被外部访问

下面是封装的post请求。 res在内部函数中，如何被openPost()访问并返回，调用时需要用到res的值

//POST请求
function openPost(url, data) {
  let xhr = new XMLHttpRequest();
  xhr.open("post", url);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(JSON.stringify(data));
  
  xhr.onload = function () {
    var res = JSON.parse(xhr.response);
    if (res.code == 2000) {
      console.log(res);
    } else {
      console.log("请求" + url + "失败");
    }
  }; 
}

下面是调用

 var data = {
                        username: getCookie("username"),
                        sessionId: getCookie("sessionId"),
                        flag: this.flag,
                        id: parseInt(this.id),
                    };
                    var url = "/cgi-bin/software";
                    openPost(url, data);

方法一:回调函数



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查看物流</title>

</head>

<body>
  <script>
    //POST请求
    function openPost(url, data,callback) {
      let xhr = new XMLHttpRequest();
      xhr.open("post", url);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.send(JSON.stringify(data));

      xhr.onload = function () {
        var res = JSON.parse(xhr.response);
        if (res.code == 2000) {
          if(typeof(callback)=='function'){
            callback(res)
          }
          console.log(res);
        } else {
          if(typeof(callback)=='function'){
            callback('失败')
          }
          console.log("请求" + url + "失败");
        }
      };
    }

    var data = {
      username: getCookie("username"),
      sessionId: getCookie("sessionId"),
      flag: this.flag,
      id: parseInt(this.id),
    };
    var url = "/cgi-bin/software";

    openPost(url, data,function(data){
      console.log(data,'===123')
    });
  </script>
</body>

</html>

方法二


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查看物流</title>

</head>

<body>
  <script>
    //POST请求
    function openPost(url, data) {
      return new Promise((reslove, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("post", url);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(data));

        xhr.onload = function () {
          var res = JSON.parse(xhr.response);
          if (res.code == 2000) {
            reslove(res)
            console.log(res);
          } else {
            reject('失败')
            console.log("请求" + url + "失败");
          }
        };
      })

    }

    var data = {
      username: getCookie("username"),
      sessionId: getCookie("sessionId"),
      flag: this.flag,
      id: parseInt(this.id),
    };
    var url = "/cgi-bin/software";

    openPost(url, data).then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    });
  </script>
</body>

</html>


export defalt ()=>{
  return Promise(resolve,reject)=>
      {
          (url,data)=>{
                
  let xhr = new XMLHttpRequest();
  xhr.open("post", url);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(JSON.stringify(data));
  xhr.onload = function () {
    var res = JSON.parse(xhr.response);
    resolve(res)
    if (res.code == 2000) {
      console.log(res);
    } else {
      console.log("请求" + url + "失败");
    }
  }; 

}
          }
}



//POST请求
function openPost(url, data,onMessage) {
  let xhr = new XMLHttpRequest();
  xhr.open("post", url);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(JSON.stringify(data));
  
  xhr.onload = function () {
    var res = JSON.parse(xhr.response);
    onMessage&&onMessage(res)
    if (res.code == 2000) {
      console.log(res);
    } else {
      console.log("请求" + url + "失败");
    }
  }; 
}
openPost(url, data,(res)=>{
  console.log(res)
});

你可以将res作为参数传入回调函数中。

例如：

function openPost(url, data, callback) {
  let xhr = new XMLHttpRequest();
  xhr.open("post", url);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(JSON.stringify(data));

  xhr.onload = function () {
    var res = JSON.parse(xhr.response);
    if (res.code == 2000) {
      callback(res);
    } else {
      console.log("请求" + url + "失败");
    }
  }; 
}

// 调用

openPost(url, data, function(res) {
  console.log(res);
});

或者你可以使用Promise来解决这个问题：

function openPost(url, data) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("post", url);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(data));

    xhr.onload = function () {
      var res = JSON.parse(xhr.response);
      if (res.code == 2000) {
        resolve(res);
      } else {
        reject(new Error("请求" + url + "失败"));
      }
    }; 
  });
}

// 调用

openPost(url, data)
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.log(error);
  });