前高频端面试题合集14-接口请求的几种方式

1. 原生ajax

1.1 ajax是什么?

​ Ajax的核心是JavaScript对象XmlHttpRequest,XmlHttpRequest使您可以使用

​ JavaScript向服务器提出请求并处理响应,而不阻塞用户。

​ 通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新

1.2 ajax作用是什么?

​ (1)通过异步模式,提升了用户体验

​ (2)Ajax可以实现动态不刷新(局部刷新)就是能在不更新整个页面的前提下维护数据。

​ 这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息

1.3 ajax创建请求步骤

get请求

​ 1. 创建一个对象

​ 2. 设置请求参数

​ 3. 发送请求

​ 4. 监听请求成功后的状态变化

post请求

​ 1. 创建一个对象

​ 2. 设置请求参数

​ 3. 设置请求头

​ 4. 发送请求

​ 5. 监听请求成功后的状态变化

1.4 ajax get和post请求的区别

  1. 使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来

    get请求

    image-20210605151510811

    post请求

    image-20210605153738816 image-20210605153855421
  2. 使用Get请求发送数据量小,Post请求发送数据量大

  3. GET请求能够被cache,POST不进行缓存。GET请求能够被保存在浏览器的浏览历史里面(密码等重要数据GET提交,别人查看历史记录,就可以直接看到这些私密数据)

  4. GET产生一个TCP数据包;POST产生两个TCP数据包。

    对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);

    而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。

2. axios 请求

2.1 axios 是什么?

​ Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。前端最流行的 ajax 请求库,

​ react/vue 官方都推荐使用 axios 发 ajax 请求

​ 在浏览器中利用的是XMLHttpRequest对象发送请求

​ 在nodejs中用的是http对象

2.2 axios 特点

​ 1. 基于 promise 的异步 ajax 请求库,支持promise所有的API

​ 2. 浏览器端/node 端都可以使用,浏览器中创建XMLHttpRequests

​ 3. 可以转换请求数据和响应数据,并对响应回来的内容自动转换成 JSON类型的数据

​ 4. 批量发送多个请求