vue2统一处理ajax请求

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;

Vue项目的`main.js`中发起Ajax请求通常是通过注册Vue实例之前进行的。这是因为`main.js`文件是Vue应用的入口文件,通常用来做一些全局的设置,如挂载Vue实例、引入路由配置、状态管理(Vuex)等。在这个文件中引入Ajax请求库(如axios)并进行全局配置,可以确保在应用的任何地方都可以方便地调用Ajax请求。 以下是`main.js`中请求Ajax的一个基本示例: ```javascript import Vue from 'vue' import App from './App.vue' import axios from 'axios' // 设置axios的默认URL前缀,可以根据项目实际情况修改 axios.defaults.baseURL = 'http://api.example.com'; // 可以设置全局的请求拦截器,为请求添加通用配置,如token认证等 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么,例如添加token到请求头 // config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token'); return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 可以设置全局的响应拦截器,对所有返回的响应进行统一处理 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么,例如超时重试等 return Promise.reject(error); }); Vue.prototype.$http = axios; // 将axios挂载到Vue实例上,方便在其他组件中使用 new Vue({ render: h => h(App), }).$mount('#app') ``` 在这个示例中,我们首先引入了`axios`库,并设置了一些全局的拦截器配置,比如请求前的配置和响应前的处理。然后,我们将`axios`实例挂载到Vue原型上,这样在任何组件中都可以通过`this.$http`来调用Ajax请求
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值