axios,ajax,fetch请求示范

2022-08-11 19:59:38 浏览数 (3)

fetch:

代码语言:javascript复制
      fetch("xxx", {
                method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: "Hubot",
          login: "hubot",
        }),
      });

axios:

执行 GET 请求

代码语言:javascript复制
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行 POST 请求

代码语言:javascript复制
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

代码语言:javascript复制
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

ajax:

代码语言:javascript复制
$("#ajaxBtn").click(function(){
 $.ajax({
    url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
      headers:{"appId":appId,"appKey":appKey,"Content-Type":"text/plain;charset=UTF,
    data:{action:"jQueryAjax"},
    type:"GET",
    success:function (data) {
    // alert("服务器返回的数据是:"   data);
    // var jsonObj = JSON.parse(data);
     $("#msg").html("编号:"   data.id   " , 姓名:"   data.name);
    },
    dataType : "json"
   });
  });

0 人点赞