1要使用axios请求数据，则需要进行一下这几个步骤哦。
- 要使用axios，就必须下载axios这个库，可以有一下几个途径：
1、使用 npm install axios 或者 yarn add axios
2、可以之间使用线上cdn：<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
- 需要从后端那里获得数据api接口地址。本次模拟数据是从JSONPlaceholder官网上随机获取的一个api接口。
- 需要了解到axios是基于 Promise + XMLHttpRequest 的，axios的底层还是ajax的。所以要知道全局函数axios.get(url)它返回的是一个Promise对象，最后还是需要一个变量容器来接收的。
- 接收到的Promise 还需要对之进行成功回调与失败回调处理。
以下是我的例子（嘻嘻）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>前端与后台交互之axios</title>
</head>
<!-- 首先第一步，要使用axios的话，就必须先引入axios这个库 -->
<!-- axios的优点就是可以解决以同步的方式处理异步操作，是基于ajax + XMLHTTPRequest的，也就是它的底层还是ajax-->
<!-- 因为这个库中已经暴露一个axios的全局函数 -->
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
//get请求的,先定义好有效的请求地址
// 为了方便，从JSONPlaceholder官网中随机获取一个api数据接口，进行请求
var url = 'http://jsonplaceholder.typicode.com/albums';
var p = axios.get(url);//这个axios()返回的是一个Promise对象，需要对这个对象进行处理
p.then((response)=>{
console.log(response);
// 这里是响应成功返回的数据，把上面的response打印出来的时候，就会得到以下结果
// config: {url: "请求的地址"}，这是一个配置文件
// headers: 请求头信息
// data: (100) 返回响应的数据
// request: ajax相关的请求信息
// status: 200；响应状态
// statusText: "OK"
// 判断响应状态
if(response.status === 200){
//获得成功响应返回的数据
console.log(response.data);
}
},(error)=>{
//错误返回错误信息
});
console.log(p);
</script>
<body>
</body>
</html>
最后通过服务器开启网页的时候，在控制台打印的数据如下（表示成功返回响应信息）：
image.png
