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项目中的封装与使用。