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,代码如下: