vue-axios

// Vue 请求数据方式有：vue-resource、axios、fetchJsonp三种。其中，vue-resource 是 Vue官方提供的插件，axios 与 fetchJsonp 是第三方插件。

//第一种,vue-resource官方提供的插件
// 安装：npm install vue-resource
// main.js中引入
import vue from 'vue'
import vueResource from 'vue-resource'

vue.use(vueResource);
//页面中使用
this.$http.get('/getList', {}).then((response => {
    console.log('成功放回数据' + response)
}, error => {
    console.log('失败返回数据' + error)
}))

//第二种，axios
//新建http.js
import axios from 'axios'
import qs from 'qs'

//默认请求路径
axios.defaults.baseURL = '';
//设置请求数据时间
axios.defaults.timeout = 10000;
//请求头设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//请求拦截,每次请求时判断条件
axios.interceptors.request.use(
    config => {
        const token = sessionStorage.getItem('userInfo');
        if (token) {
            return config
        }
    }, error => {
        return Promise.error(error)
    }
)
//响应式拦截
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                case 401:
                    router.replace({
                        path: '/login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;
                case 403:
                    setTimeout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;
            }
            return Promise.reject(error.response);
        }
    }
);

//封装GET请求方法
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    })
}
//封装POST方法
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, QS.stringify(params))
            .then(res => {
                resolve(res.data);
            })
            .catch(err =>{
                reject(err.data)
            })
    });
}

//创建api.js存放，请求接口的方法
import {get,post} from "./http";

export function getHome(url,params){
    let data=get(url,params)
    return data;
}

//页面中使用
import {getHome} from "./api";
create(){
    getHome('/get/list',888)
}