[JavaScript知识库]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请求，并将数据渲染到页面上

<template>
  <div>
    <button @click="getData">点我发送请求</button>
 <!-- 虚拟标签：template 本身真实的html标签，仅仅是虚拟包围 -->
    <template v-if="data">
      <!-- 请求完成前，data值是null，null.code会报错 -->
      <div>{{ data.code }}</div>
      <div>{{ data.message }}</div>
      <div v-for="(item, index) in data.result" :key="index">
        <img :src="item.image" alt="" />
        <div>{{ item.title }}</div>
        <div>{{ item.passtime }}</div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: null, // 属性data用于存储请求返回来的数据，默认值null
    };
  },
  methods: {
    getData() {
      const url = "https://api.apiopen.top/getWangYiNews";
      // 在axios中，使用promise语法代替回调函数
      this.axios
        .get(url)
        // 成功后执行
        .then((result) => {
          //result 就是请求的结果
          console.log(result);
          // 把请求返回的数据存储到本地的data上
          this.data = result.data;
        })
        // 错误处理
        .catch((err) => {});
    },
  },
};
</script>

注意事项：

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

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

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

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

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

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

持续更新中。。。