如何实现Vue中Axios请求封装及拦截器配置步骤？

本文共计1147个文字，预计阅读时间需要5分钟。

PS：在vue-cli3构建的基础Vue项目中编写代码时，可以使用`vue create my-project`命令。`axios`是一个基于`promise`的HTTP库，适用于在浏览器和Node.js环境中使用，也是Vue官方推荐的HTTP库。`axios`的使用非常便捷，其中包含的功能如请求取消、自动转换JSON响应、客户端支持等，使其在处理HTTP请求时非常高效。

PS：本文代码在vue-cli3构建的基础vue项目之上进行编写：vue create my-project

　　axios 是一个基于 promise 的 http 库，可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库。

　　axios很好用，其中之一就是它的拦截器十分强大，我们可以为请求和响应设置拦截器，比如请求拦截器可以在每个请求里加上token，做了统一处理后维护起来也方便，响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权。

　　之前初学的时候，经常将axios数据请求写在各组件方法内，但实践证明，如果项目接口变动要修改url地址等参数会比较为麻烦，不易维护，于是需要对axios进行封装并将接口统一管理。

　　当然在最之前，我们需要安装axios，使用命令 npm install axios --save 即可。

一、新建函数文件

　　在 src目录 下新建一个 axios目录，然后在里面创建 axios-request.js 和 axios-api.js 两个文件，
　　其中 aixos-request.js 用于对axios进行封装，axios-api.js 用于接口的统一管理。