axios + ajax 面试题总结

axios 是什么

1. Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。前端最流行的 ajax 请求库， 2. react/vue 官方都推荐使用 axios 发 ajax 请求

axios 特点

1. 基于 promise 的异步 ajax 请求库，支持promise所有的API 2. 浏览器端/node 端都可以使用，浏览器中创建XMLHttpRequests 3. 支持请求／响应拦截器 4. 支持请求取消 5. 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据 6. 批量发送多个请求 7. 安全性更高，客户端支持防御 XSRF，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

axios 常用语法

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

axios为什么既能在浏览器环境运行又能在服务器(node)环境运行？

axios在浏览器端使用XMLHttpRequest对象发送ajax请求；在node环境使用http对象发送ajax请求。

代码语言：javascript复制

var defaults.adapter = getDefaultAdapter();
function getDefaultAdapter () {
  var adapter;
    if (typeof XMLHttpRequest !== 'undefined') {
      // 浏览器环境
        adapter = require('./adapter/xhr');
    } else if (typeof process !== 'undefined') {
      // node环境
        adapter = require('./adapter/http');
    }
   return adapter;
}

上面几行代码，可以看出：XMLHttpRequest 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能；process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。原来作者是通过判断XMLHttpRequest和process这两个全局变量来判断程序的运行环境的，从而在不同的环境提供不同的http请求模块，实现客户端和服务端程序的兼容。

axios相比原生ajax的优点

ajax的缺点

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰。
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
不符合关注分离（Separation of Concerns）的原则
配置和调用方式非常混乱，而且基于事件的异步模型不友好。

什么是AJAX

AJAX的全称是Asynchronous JavaScript And XML.，是异步的 JavaScript 和 XML，可以在无需重新加载整个网页的情况下，更新部分网页内容的技术。是用于创建快速动态网页的技术。
依赖于浏览器提供的XMLHttpRequest对象，这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新的情况下和服务器进行数据交互。

为什么要用ajax

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
ajax实现页面和 web 服务器之间数据的异步传输。通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

ajax的缺点

ajax不支持浏览器back按钮。
安全问题 AJAX暴露了与服务器交互的细节。
对搜索引擎的支持比较弱。
破坏了程序的异常机制。
不容易调试。

AJAX异步请求原理

浏览器把请求交给代理对象—XMLHttpRequest（绝大多数浏览器都内置了这个对象），由代理对象向服务器发起请求，接收、解析服务器响应的数据，并把数据更新到浏览器指定的控件上。从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求，不用重新加载整个页面来展示服务器响应的数据，在异步请求发送的过程中浏览器还能进行其它的操作。

AJAX异步请求的流程

代码语言：javascript复制

function xhrAjax({
    url,
    method = 'GET',
    params = {},
    data = {}
}) {
    // 执行异步ajax请求
    // 第一步，创建对象
    const xhr = new XMLHttpRequest()
    // 第二步，配置请求信息，参数一是请求的类型,参数二是请求的url,
    xhr.open(method, url, true)
    // 发送请求
    if (method === 'GET' || method === 'DELETE') {
        // 第三步，发送请求
        xhr.send()
    } else if (method === 'POST' || method === 'PUT') {
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
        xhr.send('pageIndex=1&pageSize=5') // 发送json格式请求体参数
        // 告诉服务器请求体的格式是json
        // xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
        // xhr.send(JSON.stringify(data)) // 发送json格式请求体参数
    }
    // 第四步，绑定状态改变的监听
    xhr.onreadystatechange = function () {
        // 如果请求没有完成, 直接结束
        if (xhr.readyState !== 4) {
            return
        }
        // 如果响应状态码在[200, 300)之间代表成功, 否则失败
        const {status, statusText} = xhr
        // 第五步，获取返回的数据
        if (status >= 200 && status <= 299) { // 如果请求成功了, 调用resolve()
            // 准备结果数据对象response
            const response = {
                data: JSON.parse(xhr.response),
                status,
                statusText
            }
        }
    }
}

请介绍一下XMLhttprequest对象。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

AJAX最大的特点是什么。

Ajax可以实现动态不刷新（局部刷新）就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

Ajax包含下列技术：

基于web标准（standards-basedpresentation）XHTML CSS的表示；
使用 DOM（Document ObjectModel）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。

AJAX应用和传统Web应用有什么不同

在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。
因为服务器每次都会返回一个新的页面，所以传统的web应用有可能很慢而且用户交互不友好。
使用AJAX技术，就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。
通过HTTP Request，一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是通一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。