什么是Axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
Axios文档地址：https://www.axios-http.cn/

特性：

1. 从浏览器创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防御XSRF

使用方式

Axios引入

外部引入cdn，以下两种方式任选一种即可。

//第一种
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//第二种
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Axios发送请求

使用示例（来自Axios文档）：

//第一种
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });

//第二种
// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// 总是会执行
});

`//第三种Post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});`

也可以使用Axios api来传递相关配置创建请求

// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

响应结构

一个请求的响应包含以下信息。

{
  // `data` 由服务器提供的响应
  data: {},

// `status` 来自服务器响应的 HTTP 状态码
status: 200,


// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',


// `headers` 是服务器响应头
// 所有的 header 名称都是小写，而且可以使用方括号语法访问
// 例如: `response.headers['content-type']`
headers: {},


// `config` 是 `axios` 请求的配置信息
config: {},

`// ``request`` 是生成此响应的请求
// 在node.js中它是最后一个ClientRequest实例 (in redirects)，
// 在浏览器中则是 XMLHttpRequest 实例
request: {}
}`

当使用 then 时，将接收如下响应

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

示例代码

示例代码①：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
`// 1. 调用 axios 方法得到的返回值是 Promise 对象
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: '接口地址',
// URL 中的查询参数
params: {
id: 1
}
}).then(function (result) {
console.log(result)
//result.data为获取到的数据
})
`

示例代码②：

 axios({
        url: '/getUsers',
        method: 'get',
        responseType: 'json', // 默认的
        data: {
            //'a': 1,
            //'b': 2,
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });