post、get、axios、fetch，请求方法整理

最新推荐文章于 2023-05-22 17:39:35 发布

转载最新推荐文章于 2023-05-22 17:39:35 发布 · 315 阅读

文章标签：

#请求方法

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了几种常见的HTTP请求方法，包括POST、GET、JSONP、使用Axios、Fetch及Promise封装的AJAX请求。每种方法都附带了具体的代码示例，帮助读者理解不同场景下如何选择和应用。

post请求：
function post() {
  let http;
  if (window.XMLHttpRequest) {
    http = new XMLHttpRequest(); // ?IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  }
  else{
    http = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 浏览器执行代码
  }
  var postData = {
    "mobile": 15626192509,
    "password": 12313
  };
  http.open("POST","地址",true);//连接到服务器
  http.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //设置头部信息
  http.send(postData);//发送数据
  http.onreadystatechange = function() { //响应服务器时所做的准备
    if (http.readyState == 4 && http.status == 200) { //响应成功
      var data = JSON.parse(http.responseText); //解析数据
      console.log(data);
    }
  }
}

post();
————————————————————————————————————————————————————————————
get请求：
function get(){
  var xmlhttp;
  if (window.XMLHttpRequest){
    // ?IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
  }
  else{
    // IE6, IE5 浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
    var data = JSON.parse(xmlhttp.responseText);
  }
    }
  xmlhttp.open("GET","地址",true);
  xmlhttp.send();
}

get()
————————————————————————————————————————————————————————————
原生jsonp 方法：
var sc = document.createElement("script");
sc.type = "text/javascript";
document.body.appendChild(sc);
sc.src = "http://localhost/ajax2/jsonp.php?cb=myCallBack";

function myCallBack(data){
  console.log(data);
}
————————————————————————————————————————————————————————————
axios请求：
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
————————————————————————————————————————————————————————————
fetch请求：
try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}
————————————————————————————————————————————————————————————
用promise封装ajax：
function getJSON (url) {
  return new Promise(function(resolve,reject){
    let http = null;
    try{
      http = new XMLHttpRequest()
    }
    catch(e){
      http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    http.open("get",url);
    http.onreadystatechange=function (){
      if (http.readyState === 4) {
        if (http.status === 200) {
          resolve(http.response);
        } else {
          reject(new Error(http.status));
        }
      }
    }
    http.send()
  })
}

getJSON("./ajax1.php").then(function(data){
  console.log(data);
},function(error){
  console.log(error);
})