前端get，post方式请求方式及相关分析

前端get，post方式请求方式及相关分析

1.前端常见搭建方式

• 纯后端形式，前端使用 jsp，常用的请求后端接口使用 jQuery 的 ajax【如果页面逻辑较少，主要以展示为主，可能直接使用thymeleaf静态模板】
• 前端段分离形式，常见的前端框架为 Vue，使用 Vue自己封装的请求方式 axios【其实axios是对 jQuery的 ajax进行的二次封装，可能与 Vue框架更加搭配，使用起来更加方便】

2.ajax 和 axios的请求方式分析

2.1 ajax

开发中 经常使用的有三种：POST，GET，AJAX

2.1.1 ajax 的 get请求

• $.get(url,data,callback,type)

  • 参数1: url 请求路径
  • 参数2: data 请求时携带的数据，格式: key=value 或者 {username=’baby’,pwd:666}
  • 参数3: callback 响应成功后的回调函数
  • 参数4: type 响应的数据类型 text html xml json

//JQuery get方式发送异步请求
function func1() {
    //1.参数1 url
    var url = "/login";
    //2.参数2 数据
    var data = {username:"jack"};
    //3.发送get请求
    $.get(url,data,function (param) {
        //data响应回来的内容体
        alert("响应成功! 响应数据: " + param);
   },"text");
}

2.1.2 ajax 的 post请求

• $.post(url,data,callback,type)

  • 里面的四个参数和get方式是一样, 不一样的是请求方式的不同

//JQuery post方式发送异步请求
function func2() {
    //1.参数1 url
    var url = "/login";
    //2.参数2 数据
    var data = {username:"lucy"};
    //3.发送get请求
    $.post(url,data,function (param) {
   //data响应回来的内容体
   alert("响应成功! 响应数据: " + param);
   },"text");
}

2.1.3 ajax 的 ajax请求

• $.ajax()方法可以更加详细的设置底层的参数。该方法通常用于其他方法不能完成的请求
• ajax请求方式语法:
  • 方式1: jQuery.ajax({ })
  • 方式2: $.ajax({ })

//Ajax方式 发送请求
function func3() {
    $.ajax({
        url:"/login",
        async:true, //是否异步
        data:{username:"tom"},
        type:"POST", //请求方式
        dataType:"text", //返回数据的数据类型
        success:function (param) {
            alert("响应成功!! " + param)
        },
        error:function () {
            alert("响应失败!!")
        }
    });
}

2.2 axios

axios 在线包的导入

<script src="https://unpkg.com/axios/dist/axios.min.js">script>

2.2.1 axios 的 get请求

请求方式

axios.get(地址?key=value&key2=value2)
.then(
	function(response){}, // 请求成功的响应处理函数
	function(error){} // 请求失败的响应处理函数
);

2.2.2 axios 的 post请求

请求方式

axios.post(
	地址,
	{key:value,key2:value2}
).then(
	function(response){}, // 请求成功的响应处理函数
	function(error){} // 请求失败的响应处理函数
);

axios中经常会出现一个问题：就是使用 this 指针，发现在 get 或 post请求中的回调函数中会报出空指针，或者前端取某一个对象的属性时会出现 undefined 或 null，这是因为在请求时 this 指针指向的内容已经发生了变化，我们常做的处理是在 请求之前将 this 指针原指向内容先保存在一个临时变量中，待后续使用时使用这个临时变量来进行调用函数 或 操作对象属性

3.使用 axios 或 ajax的原因

因为目前浏览器页面的刷新或者局部按钮，逻辑的执行绝大部分都是异步的，而且是局部刷新技术，那为什么是这样的呢？

• 异步原因：

  • 因为采用异步相对于同步来说，效率会高很多，因为可以在前端页面刷新，逻辑执行的情况下同时请求后端接口，这样会尽可能的加快页面加载效率。
  • 但是异步并不全是好处，如果开发前端多了就会发现，在 Vue 某些场景下必须要先等 axios异步逻辑执行完成之前或之后才能执行某些操作，但是这些常常会被当做 bug而不能及时发现代码问题所在，所以会使用到 nextTick。

• 局部刷新原因：

  • 这个问题就相对简单了，因为局部刷新可以尽可能的保留用户当前页面上已经操作过得行为或者保留的数据，因为谁也不愿意填写了一半的表单，或者填写完了用户名密码，而当自己想要获取验证码时却被清空了表单数据而要重新填写吧。
  • 同时很多文件，比如说图片，视频等资源，亦或者是某些数据请求接口避免重复请求到后端，从而减小对于后端的请求压力。