什么是Axios？

Axios是一个基于Promise的HTTP库，可以发送get、post等请求，它作用于浏览器和Node.js中。当运行在浏览器时，使用XMLHttpRequest接口发送请求；当运行在Node.js时，使用HTTP对象发送请求。

Axios的主要特性如下。

• 支持所有的 API。

• 支持拦截请求和响应。

• 可以转换请求数据和响应数据，并可以将响应的内容自动转换为JSON类型的数据。

• 安全性高，客户端支持防御跨站请求伪造（Cross-Site Request Forgery，CSRF）。

Axios的安装方式主要有两种，一种是通过标签引入，另一种是使用包管理工具安装。 

1. 通过标签引入

使用Unpkg或jsDelivr的内容分发网络服务提供的Axios文件，也可以将Axios文件下载至本地再引入。

① 使用Unpkg的CDN服务引入Axios。

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

② 使用jsDelivr的CDN服务引入Axios。

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

注意：

也可以从Axios官方网站中直接下载Axios，下载后再将文件引入网页。因为需要将文件下载到本地，所以不需要考虑无网络的情况。

2. 使用包管理工具安装

使用npm或yarn包管理工具安装Axios。

# 使用npm包管理工具安装
npm install axios --save
# 使用yarn包管理工具安装
yarn add axios@1.2.1 --save

Axios安装完成后，如何使用呢？

在项目中使用Axios时，通常的做法是先将Axios封装成一个模块，然后在组件中导入模块。

① 将Axios封装成模块，创建src\axios\request.js文件。

import axios from 'axios'
const request = axios.create({
  timeout: 2000
})
export default request

② 在组件中导入模块，在src\App.vue文件中导入模块。

import request from './axios/request.js'

Axios常用的请求方式：get请求和post请求。

① 使用Axios发送get请求的基本语法格式。

request({
  url: '请求路径',
  method: 'get',
  params: { 参数 }
}).then(res => {
  console.log(res)
}).catch(error => {
  console.log(error)
})

② 使用Axios发送post请求的基本语法格式。

request({
  url: '请求路径',
  method: 'post',
  data: { 参数 }
}).then(res => {
  console.log(res)
}).catch(error => {
  console.log(error)
})