xios是什么？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。我们知道 Promise 是 js 异步的一种解决方案，它最大的特性就是可以通过 .then 的方式来进行链式调用。

其实说白了axios是对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。

为什么选择axios?

1. vue的作者尤雨溪推荐使用axios.
2. 符合前后端分离的趋势，及前端的MVVM的浪潮

功能特点：

支持多种请求方式：

Axios的基本使用

axios的使用比较简单，文档讲得也非常清晰，你应该先阅读axios的官方文档：axios文档。

在html页面中直接引入使用:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Html页面基本使用

以下案例中的get请求地址为crmeb相关演示站地址，可用于测试获取！

1. 获取一个get请求

<script>
  const url = 'https://store.crmeb.net/api/pc/get_category_product'
  axios({
    url: url,
    method: 'get',  // 这里可以省略，默认为get
  }).then(res => {
    // 返回请求到的数据
    console.log(res)
  }).catch(err => {
    // 返回错误信息
    console.log(err)
  })  
</script>

2. 在get请求的url中传参，只需要定义一个params:{}即可！

<script>
  const url = 'https://store.crmeb.net/api/pc/get_category_product'
  axios({
    url: url,
    method: 'get',  // 这里可以省略，默认为get
    // 这里的键值对会拼接成这样url?page=1&limit=3
    params: {
      page: 1,
      limit: 3
    }
  }).then(res => {
    // 返回请求到的数据
    console.log(res)
  }).catch(err => {
    // 返回错误信息
    console.log(err)
  })  
</script>

3. 发送一个post请求，与get请求类似，只需要将method改为post，定义一个data:{}即可,data中的数据则是服务器需要接收的字段数据！

<script>
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res => {
    // 返回请求到的数据
    console.log(res)
  }).catch(err => {
    // 返回错误信息
    console.log(err)
  });
</script>

4. 发送一个并发请求

如果在开发中需要等到多个接口的数据同时请求到后才能继续后边的逻辑，那么即可使用并发请求，axios并发请求，使用all方法，all方法的参数为一个数组，数组的每个值可以为一次请求，请求完成后直接.then即可合并两次请求的数据，返回结果为一个数组！

<script>
axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(results => {
    console.log(results)
})
</script>

如果你想自动把这个数组展开的话在then()方法中传入axios.spread()方法即可，如下所示：

<script>
axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))
</script>

但在使用vue组件化开发的时候一般我们会通过npm安装，引入项目！

组件化开发中使用

1. 使用npm进行安装

npm install axios --save

一般在实际项目中我们并不会像上边这样直接去使用axios请求数据，而是将axios封装在一个单独的文件，这样做的目的主要是用来抽取公共逻辑到一个配置文件里，对这些公共逻辑做一个封装，即使某一天这个axios框架不维护了，或者出现了重大bug也不再修复的时候，我们可以只修改配置文件即可达到全局修改的目的，如果把每次请求逻辑都写到对应的组件中，那修改起来简直就是一个噩梦！

2. 封装一个axios的请求文件request.js

在项目的src目录下创建一个network文件夹，再在其中创建一个request.js文件，路径为：src/network/request.js

// src/network/request.js

// 引入axios
import axios from 'axios'

// 这里未使用default导出，是为了以后的扩展，便于导出多个方法
export function request(config){
    // 创建axios实例
    const instance = axios.create({
        // 这里定义每次请求的公共数据，例如全局请求头，api根地址，过期时间等
        // 具体参数可参考axios的官方文档
        baseURL: 'http://demo26.crmeb.net/api',
        timeout: 5000
    })
    
    // 拦截请求，如果获取某个请求需要携带一些额外数据
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 拦截响应
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )
    
    // 发送请求
    return instance(config)  

3. 使用我们封装的request请求

一般我们会将所有的请求放在一个api.js文件中，将每次请求封装为一个方法,比如我这里会在request.js的同目录创建一个api.js文件封装我们所有的请求。

import { request } from '../api/request'

// 获取分类
export const getHomeCategory = () => {
    return request({
        url: '/category'
    })
}

// 获取banner图
export const getHomeBanner = () => {
    return request({
        url: '/pc/get_banner'
    })
}

之后再在组件中引入调用导出的相关接口方法即可，如：

import { getHomeBanner } from "../network/api"

getHomeBanner().then(res => {
	console.log(res)
})

以上就是一个简单的封装，其中有个拦截请求和拦截响应，可能很多初学的人理解起来有点吃力，我在这里以个人浅见阐述，希望能带给你些许启发！

何为拦截器？

还是发挥阅读理解能力，拦截拦截其实就是此路是我开，此树是我栽，要想过此路，留下买路钱，拦截请求就是比如某些请求需要携带一些额外的信息才能访问，实际项目中最常见的就是需要登录后才能查看的信息，请求中就必须携带token才能访问，就可以在这里处理，还有拦截响应，比如请求到数据之后，发现不符合要求，先拦下来处理一下，再返回给前端，这就是一个拦截器的基本工作流程！

如下所示：

  // 拦截请求，如果获取某个请求需要携带一些额外数据
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 拦截响应
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )

axios还为我们提供了一些全局配置，如下：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

当然也可以将其配置在我们之前创建的axios实例中，使其只作用于某个实例！

然后来看一下 axios 的所有配置信息:

数据来自axios中文文档

各种请求体格式中，文件上传是比较特殊的一种，通常其content-type请求头为multipart/form-data，可以提交文本与文件混合的请求数据。这一节我们通过两个例子来看看postman怎么调用文件上传的请求。

文件格式请求体实现请求

请求示例1：只包含文件格式参数的接口

以特斯汀学院自动化测试平台项目上传头像图片的接口为例。

项目地址：http://www.testingedu.com.cn/mypro/#/login

接口地址：http://www.testingedu.com.cn/mypro/api/user/setavatar

从接口抓包信息中可以看到，Content-Type为multipart/form-data; boundary=----WebKitFormBoundarysArkjRsb6TbgepSl，其中的boundry是作为请求体多个部分的参数的分割线边界的，从请求体内容第一行就可以看到这个分割线的值。

在Postman中完成该文件上传接口的调用时，需要选择body中的form-data，在填写内容时注意将鼠标移到key列输入框的右侧，会出现一个下拉框，可以选择参数类型为Text或者File，针对文件参数选择File，并填写抓包信息中获取到的键名file，最后在VALUEL列中选择要上传的文件。

设置完请求体之后查看请求头可以看到Content-Type的值已经被自动设置为multipart/form-data，而boundry字段则是在请求发送时计算得到。所以使用postman完成文件上传接口请求时，并不需要额外设置Content-Type。

要注意，设置头像接口需要前置调用测试平台登录接口之后才能正常完成请求，否则会提示缺少user_id字段，在请求前先参考json格式请求章节的示例登录接口http://www.testingedu.com.cn/mypro/api/user/login完成登录操作之后再调用设置头像接口。

这里，我们完成了一个只有文件参数的文件上传接口，接下来，再看一个除了文件参数，还有文本格式参数的文件上传接口。

请求示例2：同时包含文件与文本格式请求的接口

以特斯汀电商项目个人信息修改头像的接口为例。

项目地址：http://www.testingedu.com.cn:8000/Home/User/info.html

接口地址：http://www.testingedu.com.cn:8000/index.php/home/Uploadify/imageUp/savepath/head_pic/pictitle/banner/dir/images.html

从抓包信息中可以看到，请求体中包含了多段由boundry分割开的请求参数内容，除了上传的文件参数之外，还包含了部分纯文本内容的参数。

将fiddler切换到WebForms格式显示则可以看到完整的参数列表，每一行的参数名为其中name指定的字段。

在Postman中完成请求时，针对同时出现文件和文本格式的请求，在选择填写的参数类型时，根据对应类型进行选择并填写。

由此可以看到，文件上传格式处理时，在Postman里只需要按照请求参数格式选择并逐个填写，并不复杂。

至此，在Postman中完成常见的几种请求体格式的请求操作都已实现。

回顾总结一下，常用的接口测试请求体的编辑格式包括如下几种，和Content-Type头域分别对应：

• application/x-www-form-urlencoded：url编码格式 即 键=值&键=值格式

在Postman中使用x-www-form-urlencoded进行填写，或者使用raw格式填写，再手动设置Content-Type

• application/json： json格式 即 {"键":值,"键":值} 格式

在Postman中使用raw格式选择json完成填写。

• text/xml：xml格式 即 <键>值<键>格式

在Postman中使用raw格式填写，再手动设置Content-Type为text/xml。

• multipart/form-data: 文本与文件混合格式表单，通常用于文件上传

在Postman中使用form-data填写，注意文件和文本类型格式，分别选择Text和File格式。