请求后台接口的方式有什么?有什么区别

  昨天被头条的面试官面完之后虐了一地,倒是不难,问一堆这个和那个有啥不同,我心里想着难道有可比性么,这种问题怎么感觉就像有时候问你人都有什么人?有啥不同一样。。。只能吐槽但是也无能为力,就怪自己学艺不精吧。

  当时可能是面试官太帅了,所以太紧张了,我竟然脑子里面想不起来原生是怎么写的了,直接说把原生的忘了,xmlhttpRequest在我的脑海里竟然一点映象也没了,面之前还手写的代码。。。

请求接口除了原生ajax,$.ajax,fetch,axios,vue框架的话自己也封装了一个vuereaouce方法。先看看这几个请求接口的写法:

原生的请求方法:

var xhr = new xmlHttpRequest();

var httprequest

xhr.onreadystatechange = function(){

if(httpRequest.readyState === XMLHttpRequest.DONE){

  if (httpRequest.status === 200) {

   alert(httpRequest.responseText);

  } else {

  alert('There was a problem with the request.');

  }

  }

  httpRequest.open('GET',url);

//发送请求

  httpRequest.send();

}

原生的ajax请求经历了这四部:

1.创建一个xmlhttpRequest请求

2.指定响应函数

3.发送请求

基于原生的ajax,大神们进行封装净化到了jquery的$.ajax,$.ajax如果用到现在的mvvm框架里面就有点不搭了,显得项目有点大占内存,配置和调用不友好

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});
自从2016年开始流行es6之后,fetxh和axios开始盛行了
axios:
  1.从浏览器中创建 XMLHttpRequest
  2.支持 Promise API
  3.客户端支持防止CSRF
  4.提供了一些并发请求的接口(重要,方便了很多的操作)
  5.从 node.js 创建 http 请求
  6.拦截请求和响应
  7.转换请求和响应数据
  8.取消请求
  9.自动转换JSON数据
axios({
  method: 'post',
  url: '/axios/ajax',
  data: {
      } })
     .then(function (response) { console.log(response); })
     .catch(function (error) { console.log(error);
  });
axios相对于别的请求接口方法里面是相对于处理的比较好的,也比较常用
fetch的写法
fetch(url,parame,callback).then(respose.json()).then(data=>console.log(data)).catch(err =>console.log(err))
下面这部分是博主的一些内容:

Ajax:
       ajax,最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。
Jquery Ajax:
      是jQuery框架中的发送后端请求技术,由于jQuery是基于原始的基础上做的封装,所以,jquery Ajax自然也是对原始ajax的封装
Fetch:
     fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。
axios:

     axios不是原生JS的,需要进行安装,它不但可以在客户端使用,而且可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于promise对象的。



 
posted @ 2018-12-29 15:26  realman?  阅读(554)  评论(0编辑  收藏  举报