Axios封装的操作流程（1）

Axios是一个基于Promise的易用，简洁高效的Http请求插件，可以用于浏览器和Node.js

1.安装axios

npm add axios

检查是否安装成功：在package.json内查看

2.Axios常用配置选项展示：

url：用于请求的服务器URL

method:创建请求时使用的方法

baseURL：请求的基地址，若URL配置的不是绝对地址，这个基地址将会附加到URL上

header:自定义请求头配置

params:与请求一起发送的URL参数，类似于vue-router的params，将会附加到URL上

data:作为请求被发送的数据，仅适用于'PUT', 'POST' , 'DELETE' , 'PATCH' 请求方法

timeout:设置请求的超时时间，单位为毫秒

withCredentials:设置跨域请求时是否需要使用凭证

responseType:设置浏览器要响应的数据类型

3.统一请求配置

在src下创建一个request文件，然后在request文件夹下创建一个config.js文件，将Axios通用配置写入文件中，代码如下：

4.统一API请求

在src/request下创建一个index.js文件，引入Axios，再引入上一步创建的config.js文件，然后创建一个request方法，返回promise,并导出这个方法，以便在其他文件中使用。在这个方法中通过axios.create创建一个Axios实例，代码如下：

5.添加请求拦截器

设置请求头，带上token，如果没有token,则需要跳回登录页面，如请求超时，则提示请求超时。修改request的方法如下（需引入router进行跳转，ElementPlus的ElMessage组件进行错误提示）

6.添加响应拦截器

若统一进行错误处理，则修改request方法如下：

7.正确处理返回了结果的数据

正确返回结果时，统一返回格式为JSON，包含三个属性：code ,msg 和data。code表示成功标识，为200表示成功，成功时通常会带回数据data,如果不是200，则为失败，其中-1表示正常的失败行为，-2表示登录失效，需要跳回登录页面，失败时通常会返回错误原因msg，代码如下：