vue-axios封装与使用
一、简介
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") || ""; // 设置tokenconfig.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",});default:return fetch;}
}export default request;
注意:download
并非是请求类型,只是为了方便区别下载文件个人添加的。
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
命名并非唯一,任意名称皆可,建议不同模块采用不同的命名予以区分,这样会方便管理。
到这一步,所有的封装工作基本都已经完成了,剩下的就是使用了。
四、使用
使用非常的简单,在.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>
至此,已完成axios
在vue
项目中的封装与使用。