mixin混入来封装axios请求

• 我们通过mixin来封装axios请求这样每一个组件直接通过混入来进行axios请求。
• 不必每次需要时都要import引入一次

1. 首先需要下载axios的包

    //用npm、cnpm或者yarn都行
    npm install axios
    yarn add axios

2. 在src里新建一个mixins文件夹，在新文件夹里新建一个js文件

//引入axios与Vue
import axios from 'axios'
import Vue from 'vue'
// 创建一个全局mixin
Vue.mixin({
    methods: {
        //get请求
        $get(url,data){
          return  axios.get(url,{
            params:data
          })
        },
        //post请求
        $post(url,data){
            return axios.post(url,data)
        }
    },
})

3. 不要忘记在main.js里将mixin引入

// @/  为src文件夹目录
//我在mixins文件夹里js文件名为index所有/index.js可以省略
import '@/mixins'

4. 这样所有的组件都能够使用axios

    //Axios 是一个基于 promise的HTTP库 所以需要then获取数据
    async created() {
        let {data} = await this.$get('dome.json')
        console.log(data)
    }

在这里我也想提一下fetch请求，需要注意的是fetch需要then两次才能得到数据

fetch("data.json").then(res=>res.json()).then(res=>{
            console.log(res)
        })