Galan小屋

welcome my blog

vue2统一处理ajax请求

By galan99

发表于 2017-12-14

axios中处理

参考女神


import Vue from 'vue';
import Qs from 'qs';
import axios from 'axios';
import { Message } from 'element-ui'
import router from '../router'


//开始请求
axios.interceptors.request.use(function (config) {
    return config;
}, function (error) {
    return Promise.reject(error);
});

//请求完成
axios.interceptors.response.use(function (response) {
    if(response.data.code==0){
        console.log('请求完成')
    }
    return response;
}, function (error) {
    return Promise.reject(error);
});


export const Ajax= (...rest) => {

    function checkStatus(response) {
        if(response.data.code!=0 && response.data.msg){
            Message.error(response.data.msg);
        }
        return response.data
    }

    function checkCode(res) {
        Message.error('请求出错,请稍后再试!');
        return res
    }

    let data=rest[2];
    let headers={'X-Requested-With': 'XMLHttpRequest'};
    let json={};

    if(rest[0].toLowerCase()!='get'){
        data= rest.length == 3 ? Qs.stringify(data) : data;
        headers= {
            'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        };
        json.data=data;
    }else{
        //data.t=new Date().getTime(); //去除get缓存
        json.params=data;
    }

    
    json.method=rest[0]; // 请求方式
    json.url=rest[1]; // 请求的地址
    json.timeout= 80000; // 超时时间, 单位毫秒
    json.headers=headers;

    return axios(json).then(checkStatus).catch(checkCode);

}

/*
ajax使用
import {Ajax} from "../../../../utils";
async comeIn(){
    let postData = {
        page: this.curPage, 
        pageSize: this.pageSize,
        sort: this.sort,
    };
    const data=await Ajax('get',`${this.$url}wpk/popups/list`,postData);
    if(data.code==0){

    }
}
*/


vue-router处理


import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
    /*mode: 'history',*/
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/home',
            component: resolve => require(['../view/common/Home.vue'], resolve),
            children: [
                /* 页面配置 ---- 配置相应导航栏对应的页面 */
                {
                    path: '/',
                    component: resolve => require(['../view/common/Readme.vue'], resolve)       // 首页
                }, {
                    path: '/editPassword',
                    component: resolve => require(['../view/common/editPassword.vue'], resolve)       // 首页
                }            
            ]
        },
        {
            path: '/login',
            component: resolve => require(['../view/common/Login.vue'], resolve)
        },
    ]
})

router.beforeEach((to, from, next) => {
    /*next({
        path: '/login',
        query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
    })*/
    next();
})

export default router;