9vue中封装axios发送请求

1、直接引入axios发送

一般为了方便或者是刚学习vue时，我们都喜欢这样做。比如，在组件里引入axios再发送。

组件里引入：import axios from 'axios';

直接放在方法里发送：

            axios.get('https://autumnfish.cn/api/joke/').then(response=>{
                console.log(response.data);
            });

这样有个缺点：那就是，如果你的项目有几十个组件都需要发送请求获取数据。那你就要每个组件里引入后写一些重复代码。比如axios的url。你要写重复的，后期维护也不方便，如果改了域名，还有一个个组件进行修改。

2、全局挂载axios并配置基础域名

2.1、在main.js文件里引入axios并配置基础域名和全局挂载

import Vue from 'vue'
import App from './App.vue'

//关闭生产提升
Vue.config.productionTip = false;

import axios from 'axios';

// 设置默认路由前缀
axios.defaults.baseURL='https://autumnfish.cn';

//全局挂载
Vue.prototype.$axios=axios;

new Vue({
  axios,//设置axios的配置项
  render: h => h(App),
}).$mount('#app')

这样在所有组件里都可以直接使用，而且url不用写全

            this.$axios({
                url:'/api/joke/',
            }).then(resopnse=>{
            console.log(resopnse.data);
          });

这样做也不是很好，一个基础域名有时候其实并不够用，而且也不是所有组件都要发送请求。也可以不用全局挂载。

3、单独封装axios

在src目录单独创建一个文件夹utils，在里面创建一个request.js模块，用于封装axios。

import axios from 'axios';

//基本请求1
 function request1(config){//config是请求的配置项，是一个对象，包含url,method
    var  instance1=axios.create({
        baseURL:"https://autumnfish.cn",
        timeout:5000
    });
    //返回Promise对象
    return instance1(config);
}

//基本请求2
function  request2(config){
    const instance2=axios.create({
        baseURL:"http://localhost:8012",
        timeout:5000
    });
    return instance2(config);
};

//统一暴露
 export{ request1,request2};

这样所有组件使用也特别简单，想用哪个基础axios发送就引入哪个

这里全部引入进行测试：
import {request1,request2} from '../utils/request.js';

组件里发送请求

 	request1({
                url:'/api/joke/'
            }).then(r=>{
                console.log(r.data);
            });   
            
            
         request2({
                url:'/Animal.json'
            }).then(r=>{
                console.log(r.data);
            });