我们可以在前端应用里安装一个 http 客户端来请求服务端提供的应用接口处理应用的数据。axios 就是其中的一种 http 客户端。在我们的这个 vue 项目里可以安装一个 axios，在项目所在目录的下面，执行一下 yarn add axios@0.20.0 。

装好以后就可以在应用里使用 axios 发送 http 请求了。 在项目的 app 这个组件里可以试一下， 首先要导入 axios ，它来自 axios 这个包。

然后可以找个地方请求服务端接口，比如在组件里添加一个 created ，组件创建以后会执行组件里的这个方法。这里用一下 axios 上面提供的一些方法发送 http 请求。

想要发送 GET 类型的 http 请求，可以使用 axios 上的 get 这个方法。 然后把要请求的接口的地址告诉给这个方法就可以了。地址是 http://localhost:3000/posts ，这个是我们的服务端应用的内容列表接口。

方法会返回一个 Promise，所以可以在它后面继续使用 then 处理一下正常得到响应以后要做的事情。提供一个回调参数，里面接收一个 response 参数，在控制台上可以输出 response 检查一下。这个 response 就是请求以后从服务端那里得到的响应，这个响应会被 axios 处理过。

回到浏览器观察一下浏览器的控制台。组件被创建以后，会使用 axios 上面提供的 get 这个方法，请求服务端应用提供的一个内容列表接口。

在控制台上输出了这个响应，在这个响应里面，会包含服务端响应的状态码，响应里的 Headers ，也就是头部，还有响应的具体的数据。这个数据是在 data 这个属性里面。 在这里你会发现一组内容列表数据。每个项目都是一个对象，里面是 id，title ，还有 content 这些属性。

想在组件里使用从服务端那里请求回来的数据，可以这样，先在组件里添加一个数据，比如 posts，默认可以让它等于一个空白的数组。

有组件里成功得到了响应以后，设置一下组件里的 posts 这个数据的值，这里应该就是 response.data 。

在组件的模板里，可以用一下请求回来的列表数据，用一组 div ，在元素上用 v-for 循环处理一个内容列表，post in posts ，元素上绑定一个 key，值可以设置成 post 里的 id 属性的值。

元素里包装的内容可以绑定输出 post 里的 title 这个属性的值，后面再加上一个小横线，一组 small 标签，再绑定输出 post.user 里的 name 属性的值。

回到浏览器预览一下，现在界面上会显示一组内容列表。这些列表数据就是在 vue 应用里请求服务端的内容列表接口获取到的。