Vue（五）Vue中的网络请求（使用Vue脚手架发送Axios请求）

一、Axios

        1、定义：利用ES6提供的Promise方式，把AJAX进行了封装。我们在Vue中发送网络请求，基本上就是使用Axios

        需要安装第三方的Axios模块，才能使用

        2、安装Axios模块

安装Axios模块：npm i axios vue-axios

        3、配置项目中的Axios

（1）在项目的src文件夹中创建utils文件夹；

（2）在utils文件中创建axios.js文件；

（3）将下方代码复制/粘贴到axios.js文件中

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

//use：将第三方模块 注入到Vue实例对象中的方法
Vue.use(VueAxios, axios)

 （4）必须在main.js中引入当前文件，才能触发此文件中的代码

import './utils/axios'

        配置好之后，就能够在Vue上面找到axios这个属性了。

        4、案例：试着发送一个GET请求，并将数据渲染到页面上

注意事项：

（1）由于在axios中，使用promise语法代替回调函数，所以.then返回请求成功的结果，.catch进行错误处理；

（2）请求成功后，一定要记得在data中，声明一个变量，来接收请求返回的数据=> this.data=result.data;

 （3）渲染数据的时候，由于在我们在请求完成前，案例中data的值是null，null.code就会报错，所以需要在父元素中使用 v-if 进行判断，当data中拿到了请求回来的数据，再进行页面的渲染。这里我是使用template虚拟标签进行虚拟包围，这样不会影响页面结构。

（4）在渲染图片时，要注意两点：

        ①src前面要加 ：，将它变成一个动态属性；

        ②加了：之后，src中的变量就不用加 {{}} 了。

持续更新中。。。