vue-cli 4+axios+代理+封装 案例代码分享
引言：笔者为前端小白，本文乃笔者初学axios，参考无数资料写下Demo的代码分享，介于网上资料虽然多但是大多需要不断尝试才能验证真伪，本文代码皆是笔者验证可行的代码，希望能给同是小白的小伙伴带来一点便利（拿去拿去，不用客气～ ^!^）
项目背景：前端框架是Vue-cli4.0，http请求处理使用axios，后端java/数据库Mysql（小伙伴友情协助，此处点36个赞！）
方案一：axios直接使用
1、使用基础：
1）安装axios：
npm install -save axios2）在main,js中饮用axios：
// 全局引入axios，并进行全局注册
import axios from "axios";
Vue.prototype.$axios = axios;2、get请求（参数写在params结构体内）
this.$axios({
method: "GET",
url: "/gerUsers",
params: {
id: id //get请求中使用params传递参数
}
})
.then(response => {
console.log(response.data);
})
.catch(err => {
console.log(err);
})3、post请求（需要写明 contengType并将参数写在dataje gou，不然会报这样的错：“Required request body is missing”）
this.$axios({
method: "POST",
url: "/addUser",
contentType: "application/json; charset=utf-8",
data: {
userName: "Lily",
sex: "Female",
age: "24",
phone: "13XXXXXXXXX",
email: "[email protected]"
}
})
.then(response => {
console.log(response.data);
})
.catch(err => {
console.log(err);
})方案二：axios简单封装+代理
1、创建文件目录，在src中常见http文件夹，在http文件夹中创建如下文件：
1）创建 http.js ，内容为用户全部请求的方式；
import axios from "axios";
axios.defaults.timeout = 5000; // 请求超时
axios.defaults.baseURL = "/api"; // 增加请求默认路径前缀
export default {
/**
* get 请求
* @param url 接口路由
* @returns {AxiosPromise}
*/
get(url, params, headers) {
let options = {};
if (params) {
options.params = params;
}
if (headers) {
options.headers = headers;
}
return axios.get(url, options);
},
/**
* post 请求
*
* @param url 接口路由
* @param params 接口参数
* @returns {AxiosPromise}
*/
post(url, headers, data) {
let options = {};
if (headers) {
options.headers = headers;
}
return axios.post(url, data, options);
}
};
2）创建 api.js 用于存放后端提供接口地址；
export default {
// get请求，参数为 id
getUsers: {
url: "/user/getUsers"
},
// post请求，参数为 userName, sex, age, phone, email
addUser: {
url: "/user/addUser"
},
}3）创建 axios.js 用户做 axios 拦截器；
import axios from "axios";
// 请求拦截
axios.interceptors.request.use(
config => {
// 1. 这个位置就请求前最后的配置
// 2. 当然你也可以在这个位置 加入你的后端需要的用户授权信息
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截
axios.interceptors.response.use(
response => {
// 请求成功
// 1. 根据自己项目需求定制自己的拦截
// 2. 然后返回数据
return response.data;
},
error => {
// 请求失败
if (error && error.response) {
switch (error.response.status) {
case 400:
// 对400错误您的处理
console.log("错误请求");
break;
case 403:
// 对 403 错误进行处理
console.log("拒绝访问");
break;
case 404:
// 对 404 错误进行处理
console.log("请求错误,未找到该资源");
break;
case 500:
// 对 500 错误进行处理
console.log("服务器端出错");
break;
case 502:
// 对 502 错误进行处理
console.log("网络错误");
break;
case 503:
// 对 503 错误进行处理
console.log("服务不可用");
break;
case 504:
// 对 504 错误进行处理
console.log("网络超时");
break;
default:
// 如果以上都不是的处理
return Promise.reject(error);
}
} else {
console.log("连接到服务器失败");
}
}
);
2、在根目录下创建 vue.config.js 文件，内容为用户请求代理配置：
module.exports = {
devServer: {
port: 8080,
// open: true, //配置自动启动浏览器
proxy: {
"/api": {
target: "http://192.168.1.10:8080", //后端ip地址及端口
ws: true, //是否跨域
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
}
};
3、在src下的main.js中添加引用代码：
import Vue from "vue";
import App from "./App.vue";
import api from "./http/api";
import http from "./http/http";
import "./http/axios";
// 对后端接口 进行全局注册，将api挂载到vue的原型上
Vue.prototype.$api = api;
// 对请求方式 进行全局注册
Vue.prototype.$http = http;
// 以下是创建vue实例代码，此处略4、在项目中使用：
1）get请求
this.$http.get(this.$api.getUsers.url, { id: 19 }).then(result => {
// 此处为获取数据后需要执行的代码，比如格式化数据、渲染数据列表等
})2）post请求
this.$http.post(
this.$api.addUser.url,
{
// 在post请求中增加Content-Type内容
headers: {
"Content-Type": "application/json; charset=utf-8"
}
},
// data内的内容放在最后
{
userName: "Lily",
sex: "Female",
age: "24",
phone: "13XXXXXXXXX",
email: "[email protected]"
}
)
.then(response => {
// 此处为post请求完成后的操作，比如提示操作成功、页面跳转等
console.log("操作成功！");
})
写在最后的话：笔者能力有限，代码或存在一些瑕疵，缺点是仅支持本地开发，没有配置环境变量。如用笔者代码的小伙伴们如果有遇到问题，欢迎留言，我们共同探讨，同时也期待有机会拜读前端大牛的经典之作，走过路过，还请不吝赐教（笔芯～）。