- 2023-5-6 补充更新内容:跨域处理方式、环境变量、开发与生产环境配置
一、简介
Axios 是一个基于 promise 网络请求库,作用于node.js
和浏览器中。
这是一个使用率很高的前端网络请求库,几乎所有的前端项目都会使用,本文主要介绍的是如何在vue
项目中使用axios
,并对其进行全面的封装。
二、安装
使用 npm
:
npm install axios
使用 bower
:
bower install axios
使用 cdn
:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
安装完成后,在main.js
中引入axios
const axios = require("axios");
Vue.prototype.$axios = axios;
三、封装
这里写的浅显直白点,按照步骤一点一点完成,即可顺利使用。
1. 第一步:封装请求配置
在src/utils
目录下创建fetch.js
文件,没有utils
文件夹的可以自己创建。
// fetch.js
import router from "../router/index"; // 引入路由,token过期时返回登录页
import Cookies from "js-cookie"; // 引入Cookies插件,用来存储token
import { Message } from "element-ui"; // 引入element插件,进行错误提示,看项目需求,也可以不用
const axios = require("axios");
axios.defaults.headers["Content-Type"] = "application/json;charset=UTF-8";
const fetch = axios.create({
timeout: 60 * 1000, // 设置超时时间
});
// 请求拦截器
fetch.interceptors.request.use(
(config) => {
const token = Cookies.get("token") || ""; // 设置token
config.headers.common["Authorization"] = token;
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截器
fetch.interceptors.response.use(
(res) => {
// 当content-download==='1',进行文件下载,判断条件与后端协商一致即可,此处只是举例
if (res.headers["content-download"] === "1") {
return res; // 此处返回res是因为需要在headers中获取文件名
} else {
// 其它状态码可自行进行补充,本文仅例举一项
if (res.data.code === 500) {
return Promise.reject(res.data);
} else {
if (res.data.code === 200) {
return res.data;
} else {
return Promise.reject(res.data);
}
}
}
},
(error) => {
const stateCode = error.response.status;
Toast.clear();
if (stateCode === 401 || stateCode === 403) {
Cookies.remove("token");
Message.error("登录已失效,请重新登录!");
router.push("/login");
}
return Promise.reject(error);
}
);
export default fetch;
2. 第二步:封装请求类型
在src/utils
目录下创建request.js
文件。
// request.js
import fetch from "./fetch";
function request(url, method, data) {
switch (method) {
case "get":
return fetch({
method: "get",
url,
params: data,
});
case "post":
return fetch({
method: "post",
url,
data,
});
case "download":
return fetch({
method: "get",
url,
params: data,
responseType: "blob",
});
case 'upload':
return fetch({
method: 'post',
headers: { 'Content-Type': 'multipart/form-data' },
url,
data
})
default:
return fetch;
}
}
export default request;
注意:download
、upload
并非是请求类型,只是为了方便下载、上传文件添加的。
3. 第三步:添加接口
在src/api
目录下创建index.js
文件,没有api
文件夹的可以自己创建。
// index.js
import request from "@/utils/request";
export function login(data) {
return request("/api/login", "get", data);
}
export function loginOut(data) {
return request("/api/login-out", "post", data);
}
export function fileDownload(data) {
return request("/api/file-download", "download", data);
}
注意:这里的index.js
命名并非唯一,任意名称皆可,建议不同模块采用不同的命名予以区分,这样会方便管理。
到这一步,所有的封装工作基本都已经完成了,剩下的就是使用了。
四、环境变量
在根目录分别创建 .env.development
和 .env.production
文件,内容为请求地址,如果有多个地址,可以多写几个。
.env.development
VITE_BASE_URL = 'http://192.168.0.1'
.env.production
VITE_BASE_URL = '/'
默认请求地址为项目打开的地址,所以需要转换成服务器所在地址。
注意:生产环境 ‘’ 与 ‘/’ 是有区别的,''
会包含出口路径,'/'
不会包含出口路径。
五、跨域代理
在 vue.config.js 中,或其自定义打包工具 config.js 中添加以下内容,不同打包工具之间有区别,具体查看相关工具官方文档。
vue.config.js
module.exports = {
proxy: {
"/api": {
target: process.env.VITE_BASE_URL,
changeOrigin: true,
pathRewrite: {
"^/api": "api"
}
}
}
},
}
六、使用
使用非常的简单,在.vue
文件中引入后,就可以直接调用了。
<script>
import { login, loginOut, fileDownload } from "@/api/index";
export default {
data() {
return {
form: {
username: "",
password: "",
};
},
methods: {
_login() {
const data = this.form;
login(data).then((res) => {
this.$message.success(res.message)
});
},
}
}
</script>
END