vue+axios拦截处理、简单二次封装

代码

http.js

import Vue from 'vue'
import { Loading,Message } from 'element-ui';
// 防止一开始弹出提示框
Vue.component(Message.name, Message);

//axios 设置
import axios from 'axios'
axios.defaults.timeout = 180000; //3min超时
//默认网关-计划系统网关
const BASE_API = "/api/myclient";

//http request 拦截器
axios.interceptors.request.use(
    config =>{
        config.headers = {
            'Authorization': localStorage.getItem('token'), // token
            'Content-Type':'application/json'
        };
        return config
    },error => {
        Message.error('http_request_error：'+JSON.stringify(error));
        return Promise.reject(error)
    }
);
//http response 拦截器
axios.interceptors.response.use(
    response =>{
        return response.data;
    },
    error =>{
        Message.closeAll();
        Message.error('http_response_error：'+JSON.stringify(error));
        return Promise.reject(error);
    }
);
const http = {
	// get 默认每个接口请求显示loading，放在这里统一处理loading
    get: (url, params = {}, prefixUrl = BASE_API, loading = true) => {
        return new Promise((resolve, reject) => {
            let model;
            if (loading) {
                model = Loading.service({fullscreen: true});
            }
            axios.get(prefixUrl + url, {
                params: params
            }).then(response => {
                if (model) model.close();
				
				// 接口数据处理状态code为200，用then接收，不是200，用catch接收	
                if (response.code == 200) {
                    resolve(response)
                } else {
                    // Message.error(response.message || '系统错误请联系管理员');
                    reject(response)
                }
            }).catch(error => {
                if (model) model.close();
                console.error('axios_get_error',error)
            })
        })
    },
	// post
    post: (url, params = {}, prefixUrl = BASE_API, loading = true) => {
        let model;
        if (loading) {
         	 model = Loading.service({fullscreen: true});
        }
        return new Promise((resolve, reject) => {
            axios.post(prefixUrl + url, JSON.stringify(params)).then(response => {
                if (model) model.close();
                if (response.code == 200) {
                    resolve(response)
                } else {
                    // Message.error(response.message || '系统错误请联系管理员');
                    reject(response)
                }
            }).catch(error => {
                if (model) model.close();
                console.error('axios_post_error',error)
            })
        })
    }
};
// 适用于vue2,绑定到vue原型上
Vue.prototype.$http = http;
// 用于vuex或其他的单独js里的调用，不用的话注释掉
module.exports = {
    $get:http.get,
    $post:http.post,
};

api代理

前后端开发的时候，如果连接的接口地址在其他同事电脑上，则需要在vue.config.js里设置api代理。

module.exports = {
  devServer: {
    proxy: {
        '/api' : {   //代理api
            target: "测试服务器地址",// 代理接口(注意只要域名就够了)
            changeOrigin: true,//是否跨域
            ws: true, // proxy websockets
            pathRewrite: {//重写路径
                "^/api": ''//代理路径
            }
        },
    }
  }
}

应用

vue组件内

let p = {
    cityCode: '',
    projectName: '测试项目',
};
this.$http.post('/project/add', p).then((res) => {
    this.$message.success('新增成功');
}).catch((res)=>{
	this.$message.warning('项目名称不能重复');
});