23.VUE_axios写法优化

如果之前所有的发送请求过程都定义在vue组件中，每次都定义一遍比较麻烦，我们可以每个接口简化写一下，单独定义，然后在vue中调用即可；

1.比如我先在src/api/api.js中进行接口发送封装；’

import axios from 'axios';
var host = 'https://dog.ceo';
export const dogs = ()=>{
    return axios.get(`${host}/api/breeds/image/random`);
}

注意可以把常量host域名单独定义；
然后发送请求时进行解析即可，get()方法中使用反引号（ESC和Tab中间）可以解析变量；
这次正常应该可以使用全局定义的axios，然后直接使用this.$axios引用,但是我使用后一直报错，单独导入后使用正常；

2.然后在组件中只需要做导入和使用即可；

把数据处理写在vue组件中；

<script>
//1.导入刚才定义的api文件
//注意导入的是{{dogs}},为刚才定义的js文件中的变量
    import {dogs} from "@/api/api";

    export default {
        name: "axios_demo1",
        data(){
            return{
                url:''
            }
        },
        mounted(){
        //2.使用导入的变量注意使用括号
            dogs()
                // .get('https://dog.ceo/api/breeds/image/random')
                // //定义成函数箭头
                .then(response => {
                    console.log(response);
                    console.log(response.data);
                    this.url = response.data.message

                }).catch(function (error) {
                console.log(error);

            });


        }

    }
</script>