如何将Vue项目中的Axios请求封装及拦截器配置步骤整合为一个长尾关键词？

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

PS：在vue-cli3构建的基础Vue项目中，进行编写时，可以使用vue create my-project命令。axios是一个基于promise的HTTP库，适用于在浏览器和node.js中使用，也是Vue官方推荐的HTTP库。axios非常方便，其中部分内容已被省略。

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 用于接口的统一管理。