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

Posted 2021-01-30 smdb

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

　　当时可能是面试官太帅了，所以太紧张了，我竟然脑子里面想不起来原生是怎么写的了，直接说把原生的忘了，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对象的。