前后端数据交互(五)——什么是 axios？

一、什么是 axios ?

axios是基于 Promise 的 ajax 封装库，也是前端目前最流行的 ajax 请求库。简单地说发送 get、post 请求，是一个轻量级的库，使用时可直接引入。

二、axios 的特点

1. 异步的 ajax 请求库。
2. 在浏览器端和 node 端都可以使用。
3. 支持 Promise API。
4. 支持请求和响应拦截。
5. 响应数据自动转换 JSON 数据。
6. 支持请求取消。
7. 可以批量发送多个请求。
8. 客户端支持安全保护，免受 XSRF 攻击。

三、axios API

3.1、安装

/* npm 安装 */
npm install axios --save

/* bower 安装 */
bower install axios

/* 使用 yarn */
yarn add axios

/* cdn 引入 */
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

注：如果简单静态页面使用，建议cdn方式引入。

3.2、axios API

向 axios 传输相关配置参数，创建请求。如：axios(config)

/* 如发送一个post请求的配置参数如下 */
axios({
 method: 'post', //请求方法
 url: '/user/12345', //访问接口
 data: { //传输数据
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
});
/* 如发送一个get请求的配置参数如下 */
axios({
  method: 'get',
  url: 'http://localhost:80/one',//请求接口
  responseType: 'stream'//响应形式
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('save.jpg')) //保存图片
  });

3.3、axios 请求方法

上边axios API 每发起一个请求，都需要设置它的请求方法和响应头超时等信息，使用起来比较繁琐，为了方便，axios 为所有支持的请求方法提供了别名，可直接指定方式发起请求，其他参数可通过全局设置。如：

axios('/user/id=1');

上述 axios 直接发送请求，不设置请求方式时，默认使用 get 请求，与 ajax 和 fetch 相同。所以发送的是一个get请求，也可以使用 get 方法发送，如下实例：

axios.get(
  '1.txt' ,
  {
   params:{id:'1'}
  }
).then(res=>{
  console.log(res);
 })
 .catch(err=>{
 console.log(err);
})

可简写成 axios(url,config)。

具体的其他方法分别为：

axios.request(config)
axios.get( url , config)
axios.delete( url , config)
axios.head( url , config)
axios.options( url , config)
axios.post( url [,data [, config ]])
axios.put( url [,data [, config ]])
axios.patch( url [,data [, config ]])

3.4、批量发送请求

网络请求中往往会有多个网络请求并发执行，有时需要统一处理它们返回结果，所以axios有并发处理。axios.all()可以并行发送多个网络请求，等待请求都返回之后，继续处理。

使用语法：

/* 第一种处理方式 */
axios.all([
 axios.get(URL1),
 axios.get(URL2),
]).then(res=>{
    console.log(res) //返回的res是一个数组，res[0]是第一个请求数据 res[1]是第二个请求数据
})

/* 第二种处理方式 */
axios.all([
 axios.get(URL1),
 axios.get(URL2),
]).then(
 axios.spread((res1,res2)=>{
   res1 //是第一个请求返回数据
   res2 //是第二个请求返回数据
  })
)

使用 axios.spread 能够自动分割请求返回数据。

1.5、全局默认配置

全局默认配置主要作用于每个请求。既节省敲代码的时间，想修改的时候，只需修改一个就可以全部修改掉。

常见的全局默认配置有：

axios.defaults.baseURL = "http://localhost:8080/" //配置域名
axios.defaults.timeout = 6000; //单位是毫秒，设置超时时间

/* 头设置 */
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

3.6、axios 实例

// 实例化的时候配置默认参数
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN

之所以使用 axios 实例化，是因为全局实例化 http 请求有全局的响应拦截，当我们某些接口无法返回状态码时，我们将无法得到 response，此时我们需要在当前 api 中重新实例化一个 axios，设置新的响应拦截码。

3.7、拦截器

拦截器分为两个，有请求拦截和响应拦截，可以统一处理某些业务。

• 请求拦截器：

/*
请求拦截器
统一在发送请求之前添加token
*/
axios.interceptors.request.use(config=>{
 config.headers.token = sessionStorage.getItem("token") //添加toke
  return config
},err=>{
 console.log(err)//请求错误
})

• 响应拦截器

axios.interceptors.response.use(response=>{
  return response
},err=>{
 console.log(err)//响应错误
})

3.8、响应内容

基本使用中，第一个实例请求成功，打印结果 console.log(res) 。返回结果如下：

{
  data:{},
  status:200,
  //从服务器返回的http状态文本
  statusText:'OK',
  //响应头信息
  headers: {},
  //config是在请求的时候的一些配置信息
  config: {}
}

四、axios 常见应用

axios既可以在浏览器端使用，也可以在node.js中使用。在浏览器端发送的是XMLHttpRequest，在 node.js 发送的是 http 。像VUE、React、Node等项目都可以使用axios。