图解Axios的全局引用和使用

一、找到package.json文件 

查看组件有没有安装完成。如果没有安装，请输入命令安装

npm install axios

npm install vue-axios

二、找到main.js文件

全局引入的出入口，所有的组件都要引入到这里。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入axios组件
import axios from 'axios';
import VueAxios from 'vue-axios';
const app=createApp(App);
app.use(VueAxios,axios);
app.use(store).use(router).mount('#app')

源码 

<template>
  <div class="hello ">
    <!-- 创建一个事件按钮 -->
  <button type="button" @click="huoqu">添加阿贾克斯</button>
      <ul class="box">
        <!-- 遍历li中的所有内容 -->
        <li v-for="item in lists" :key="item.index">  
          <img :src="item.imgurl" width="100" alt="">
          <p>标题 : {{ item.title }}</p>
          <p>现价 : {{ item.price }} <span>原价: {{ item.uprice }}</span></p>
        </li>
      </ul>
  </div>
  </template>

<script>
export default {
  data() {
    return {
      // uid: '', //相当于fastmock中的每个id
      lists: [],//用户承载fastmock中的所有值
    }
        },
  methods: {
    huoqu() {
      //将数据写入fastmock中,通过获取网址的数据
      let url = "https://www.fastmock.site/mock/fa8a771554dfd181a46f8e1b742dd651/test/pro"
      this.axios.get(url).then(res => {
        // console.log(res);  
        // console.log(res.data.datas);
       //  将从网址中获取的值赋值给数组
      this.lists = res.data.datas; 
        // console.log(this.lists);
      }).catch((err) => {
        console.log(err);
      })
    },
    mounted() {    //自动执行
      this.huoqu()
    },
  },
}
</script>

运行结果

 源码2

<template>
  <div class="hello">
        <ul class="box">
          <li v-for="item in lists" :key="item.uid">
            <img :src="item.imgurl" width="100" alt="">
            <p>{{ item.title }}</p>
            <br>
            <p>套餐 : {{ item.price }}</p>
            <br>
            <p>原价: {{ item.uprice }}</p>
            <br>
          </li>
        </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      lists: [],
      //数组传参，
    }
  },
  mounted(){    //自动执行
  this.huoqu()
},
methods:{
  huoqu() {
    let url = "https://www.fastmock.site/mock/775d524a96d23ca9e8e837908a128d9b/_meituan/meituan"
    this.axios.get(url).then(res => {
      console.log(res.data.datas);
      this.lists = res.data.datas;
      console.log(this.lists);
    }).catch((err) => {
      console.log(err);
    })
  }
},
}
</script>

<style scoped lang="scss">
.box{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  li{
    width: 180px;
  }
  img{
    width: 180px;
    height: 150px;
    margin-left: 5px;
    border-radius: 5px;
    // margin-right: 5px;
  }
}
</style>

运行结果