前端异步请求axios的介绍和使用

官网

http://www.axios-js.com/

axios是什么

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

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

axios是干啥的

当一个古代浏览器页面向服务器请求数据时，因为返回了整个页面的数据，页面会被强制刷新，对用户来说不是很友好。而且我们只需要修改页面的一些数据，但是服务器发送的是整个页面的数据，消耗了网络资源。但是我们只需要修改页面的一些数据，也希望页面不会被刷新，于是异步网络请求应运而生。

Ajax(异步JavaScript和XML):异步网络请求。Ajax可以使页面没有刷新请求数据。实现ajax的方法有很多，比如jQuery封装的ajax、原生的XMLHttpRequest和axios。但是每种方法都有其优缺点。(1)原生XMLHttpRequest的配置和调用方法繁琐，实现异步请求非常麻烦。(2)与原生ajax相比，jQuery的ajax使用起来非常方便，但是对于带有ajax的异步网络请求，无需参考jQuery框架。

axios

可以理解为ajax i/o系统，这并不是什么新技术，本质上是原生XMLHttpRequest的封装，可以用于nodejs的浏览器和HTTP客户端，但它是基于Promise的，符合最新的ES规范。具有以下特征：

1.异步,ajax和请求库基于承诺，支持所有承诺的宣传材料。

2.可以使用浏览器端/node，在浏览器中创建XMLHttpRequests。

3.支持请求响应截击机

4.支持请求取消

5.可以执行转换请求数据和响应数据，响应返回的内容可以自动转换为JSON数据。

6.成批发送多个请求

7.更高的安全性，客户端支持防御,XSRF,是让每一个请求从cookie中带来一个密钥。根据浏览器同源策略,的说法，假网站是拿不到你,cookie,中得,key,的.这样，后台就可以很容易地识别这个请求是否是用户在假网站上的误导性输入，从而采取正确的策略。

您可以使用本机XMLHttpRequest来实现ajax请求。

下图：

axios介绍：

Axios基于Promise，所以可以使用Promise API。

Axios通用语法

Axios (config) :发送任何类型请求的通用/基本方式

Axios (url [，config]) :只能指定发送get请求的url。

Axios。请求(配置):等同于axios(配置)

Axios.get (URL [，config]) :发送获取请求。

Axios.delete (URL [，config]) :发送删除请求。

Axios.post (URL [，数据，配置]) :发送一个post请求。

Axios.put (URL [，数据，配置]) :发送一个put请求。

axios.defaults.xxx:请求的默认全局配置

axios . interceptors . request . use():添加请求拦截器

Axios .拦截器. response.use () :添加一个响应拦截器。

Axios.create ([config]) :创建新的Axios(它没有以下功能)

Axios。cancel () :用于创建一个错误对象来取消请求。

Axios。canceltoken () :用于创建用于取消请求的令牌对象。

Axios。iscancel () :取消请求是错误的吗？

Axios。all (promises) :用于多个异步请求的批处理执行。

axios.spread():是一个用于指定接收所有成功数据的回调函数的方法。

基本用法发送获取请求：

基本用法发送开机自检请求：

同时，axios支持并发请求发送：可以通过axios.all(iterable)发送多个请求，参数不一定是数组，只要有iterable接口即可，函数返回一个数组axios.spread(回调)可以用来扩展结果数组：

Axios(config)可以通过设置一些属性来发送请求。

Axios，create([config])可用于创建新实例和设置相关属性。

全局默认设置

全局默认设置是指给axios增加一些默认设置，比如baseURL等。这些信息将在所有请求稍后发送时被带到请求中。

拦截器interceptors

拦截器意味着在请求或响应被处理之前拦截它们。截取后，可以对数据进行一些处理，比如在请求数据中添加头信息，或者将响应数据序列化，然后传输给浏览器。所有这些都可以在拦截器中完成。

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

Axios使用XMLHttpRequest对象在浏览器端发送ajax请求；在节点环境中使用http对象发送ajax请求。

axios相比原生ajax的缺点

ajax的缺点

本身就是针对,MVC,的编程,这不符合当前MVVM前端的浪潮。

基于土生土长的XHR发展，XHR的建筑本身并不清晰。

整个jquery项目太大了，只使用ajax引入整个JQuery是不合理的(采用个性化打包方案是享受不到CDN服务的)。

不符合关注分离.的原则

配置和调用方法非常混乱，基于事件的异步模型不友好。

来源：https://mp.weixin.qq.com/s/FNFuk-0uHqHN2hbsbaH0sA