浅谈axios及相关面试题解析

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战 !

定义:

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装。

axios的作用:

axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能.

axios特点

1. 支持浏览器和node.js
2. 支持promise
3. 能拦截请求和响应
4. 能转换请求和响应数据
5. 能取消请求
6. 自动转换JSON数据
7. 浏览器支持防止CSRF（跨站请求伪造）

拦截器

在请求或响应被then或catch处理前拦截它们。 拦截器分为请求拦截器和响应拦截器

请求拦截器（interceptors.requst）是指可以拦截每次或指定HTTP请求，并可修改配置项。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

应用场景:在发起请求之前, 最后对要发送的请求配置对象进行修改

例如: 每个请求都带上的参数，比如token，时间戳等

响应拦截器（interceptors.response）可以在每次HTTP请求后拦截住每次或指定HTTP请求，并可修改返回结果项。

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

应用场景:在响应回来后, 马上执行响应拦截器函数

例如: 判断错误状态码, 进行相应报错等提示操作;清除过期token

如果你想在稍后移除拦截器，可以这样：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

自定义 axios 实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function(){/*...*/})

使用 cancel token 取消请求

可以使用 CancelToken.source 工厂方法创建 cancel token

axios有哪些常用方法?

1. axios.get(url[, config]) //get请求用于列表和信息查询
2. axios.delete(url[, config]) //删除
3. axios.post(url[, data[, config]]) //post请求用于信息的添加
4. axios.put(url[, data[, config]]) //更新操作

axios原理

createInstance底层根据默认设置 新建一个Axios对象， axios中所有的请求[axios, axios.get, axios. post等...]内部调用的都是Axios.prototype.request,将Axios.prototype.request的内部this绑定到新建的 Axios对象上,从而形成一个axios实例。新建一个Axios对象时，会有两个拦截器，request拦截器，response拦 截器。

axios和ajax的区别和优缺点

1.区别

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。

2.优缺点：

• ajax： 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务
• axios： 从 node.js 创建 http 请求 支持 Promise API 客户端支持防止CSRF（Cross-site request forgery） 提供了一些并发请求的接口（很重要，方便了很多的操作）