统一封装 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