统一封装 Axios 接口与异常处理

vue.config.js:

// vue.config.js 配置说明

// 这里只列一部分，具体配置惨考文档：https://cli.vuejs.org/zh/config/

module.exports = {

 

publicPath: process.env.NODE_ENV === "production" ? "/spring-boot-vue/" : "/",

 

lintOnSave: true,

productionSourceMap: false,

// devServer:{type:Object} 3个属性host,port,https

// 它支持webPack-dev-server的所有选项

 

devServer: {

host: "0.0.0.0",

port: 8080,

https: false, // https:{type:Boolean}

open: false, //配置自动启动浏览器

proxy: 'http://127.0.0.1:8888' // 配置跨域处理,只有一个代理

// proxy: {

// "/spring-boot-vue": {

// target: "http://127.0.0.1:8888", // 需要请求的地址

// changeOrigin: true, // 是否跨域

// ws: false,

// pathRewrite: {

// "^/": ""

// }

// }

// } // 配置多个代理

}

};

 

axios.js

import axios from 'axios'

// import qs from 'qs'

 

// axios.defaults.baseURL = process.env.NODE_ENV === "production" ? "/" : "/spring-boot-vue";

axios.defaults.baseURL = "/spring-boot-vue";

 

axios.defaults.timeout = 10000;

 

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

 

// 响应拦截器

axios.interceptors.response.use(

response => {

console.log(response);

// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据

// 否则的话抛出错误

if (response.code === 200) {

return Promise.resolve(response);

} else {

let ret = response.data;

let code = ret.code;

if(code == 0){

return Promise.resolve(response);

}else{

alert(ret.message);

return Promise.reject(response);

}

}

},

error => {

if (error.response.status) {

alert("接口访问异常");

return Promise.reject(error.response);

}

}

);

 

/**

* get方法，对应get请求

* @param {String} url [请求的url地址]

* @param {Object} params [请求时携带的参数]

*/

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方法，对应post请求

* @param {String} url [请求的url地址]

* @param {Object} params [请求时携带的参数]

*/

export function post(url, params) {

return new Promise((resolve, reject) => {

axios.post(url, params)

.then(res => {

resolve(res.data);

})

.catch(err =>{

reject(err.data)

})

});

}

 

index.js

import { get, post } from '@/axios'

 

export const apiAddress = p => post('test', p);

 

export const apiAddressGet = p => get('test1', p);

 

export const apiAddressGet1 = indexCode => get('test2/'+indexCode, {});

 

 

home.js

var param = {"username":"11", "password":"222"};

apiAddress(param, result =>{

console.log(result);

});

 

apiAddressGet(param, result =>{

console.log(result);

});

 

apiAddressGet1('2', result =>{

console.log(result);

});

 

TestController.java

package com.example.demo.controller;

import com.example.demo.bean.User;
import com.example.demo.bean.dto.BaseResult;
import org.springframework.web.bind.annotation.*;

/**
 * @author 
 * @description TODO
 * @date 2019/4/22
 */
@RestController
public class TestController {

    @PostMapping("/test")
    public BaseResult test(@RequestBody User user){
        BaseResult baseResult = new BaseResult();
        baseResult.setCode(0);
        baseResult.setMessage("success");
        baseResult.setData("aaaa");
        return baseResult;
    }

    @GetMapping("/test1")
    public BaseResult test1(User user){
        BaseResult baseResult = new BaseResult();
        baseResult.setCode(-1);
        baseResult.setMessage("蝇是进中夲");
        return baseResult;
    }

    @GetMapping("/test2/{indexCode}")
    public BaseResult test2(@PathVariable String indexCode){
        BaseResult baseResult = new BaseResult();
        baseResult.setCode(0);
        baseResult.setMessage("success11");
        baseResult.setData("data");
        return baseResult;
    }

}

 

 

 

参考文档：

https://blog.csdn.net/qq_40128367/article/details/82735310