Vue·Axios的使用

引入项目根目录

1. 使用npm引入 npm install axios

2. 使用bower引入 bower install axios

3. 使用cdn引入 <script sr="https://unpkg.com/axios/dist/axios.min.js"></script>

如图所示：项目结构：

vue2-manage-v\src\main.js

import Vue from 'vue' import App from './App.vue' //import ElementUI from 'element-ui'; import { 
        Button,Radio,Container,Header,Main,Aside,Menu,Submenu,MenuItem,Dropdown,DropdownMenu,DropdownItem,Row,Card,Col,Table,TableColumn} from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';  import router from '../router'; import store from '../store'; import http from 'axios';   // 不是插件  Vue.config.productionTip = false  Vue.use( Button ); Vue.use( Radio ); Vue.use( Container ); Vue.use( Main ); Vue.use( Aside ); Vue.use( Header );

Vue.use( Menu );
Vue.use( Submenu );
Vue.use( MenuItem );
Vue.use( Dropdown );
Vue.use( DropdownMenu );
Vue.use( DropdownItem );

Vue.use( Row );
Vue.use( Card );
Vue.use( Col );

Vue.use( Table );
Vue.use( TableColumn );

Vue.prototype.$http = http;  // 绑定属性

new Vue({ 
        
  store,
  router,
  render: h => h(App),
}).$mount('#app')

位置：vue2-manage-v\config\index.js

export default { 
        
    baseUrl: { 
        
        dev: '/api/',
        pro: ''
    }
}

位置：vue2-manage-v\api\data.js

// 接口请求
import axios from './axios'  // ./axios调用自己二次封装的axios

export const getMenu = (param) => { 
        
    return axios.request({ 
        
        url: '/permission/getMenu',
        method: 'post',
        data: param
    })
}

位置：vue2-manage-v\api\axios.js

import axios from 'axios';
import config from '../config';

 const baseUrl = process.env.NODE_ENV  == 'development' ? config.baseUrl.dev : config.baseUrl.pro  // 调用开发与生产环境配置
 
console.log('打印配置结果信息为:',baseUrl);


class HttpRequest { 
          // 将axios抽象成工具类

    constructor(baseUrl) { 
        
        this.baseUrl = baseUrl;
    }
    getInsideConfig() { 
        
        const config = { 
        
            baseUrl: this.baseUrl,  // 请求的url信息
            header: { 
        }              // 请求头的信息
        }
        return config
    }

    interceptors(instance) { 
           // 拦截器 
        // 添加请求拦截器
        instance.interceptors.request.use(function (config) { 
        
            // 在发送请求之前做些什么
            return config;
        }, function (error) { 
        
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        // 添加响应拦截器
        instance.interceptors.response.use(function (response) { 
        
            console.log(response, 'response');
            // 对响应数据做点什么
            return response;
        }, function (error) { 
        
            console.log(error, 'error');
            // 对响应错误做点什么
            return Promise.reject(error);
        });
    }

    request(options) { 
        
        const instance = axios.create()
        options = { 
         ...this.getInsideConfig(), ...options }  // 对传入的对象进行解构 对axios简单的二次封装
        this.interceptors(instance)                         // 调用拦截器
        console.log('打印：如果控制台显示此信息，表明二次封装成功，否则可能是上面定义的拦截器参数与调用参数不一致，检查参数.');
        return instance(options)
    }
}

export default new HttpRequest(baseUrl)

vue2-manage-v\views\home\index.vue