axios的封装
引入
一般我会在utils文件夹下创建一个request.js文件,然后再创建一个api文件夹,request.js文件用来封装我们的axios,api文件下我们统一管理接口
环境的切换
我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了
设置请求超时
通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s,就会告知用户当前请求超时,请刷新等
post请求头的设置
post请求的时候,我们需要加上一个请求头,这里的请求头我是设置的本地存储的token值和用户名
请求拦截
我们在发送请求前可以进行一个请求的拦截,为什么要拦截呢?我们拦截请求是用来做什么的呢?比如,有些请求是需要用户登录之后才能访问的,或者post请求的时候,我们需要序列化我们提交的数据。这时候,我们可以在请求被发送之前进行一个拦截,从而进行我们想要的操作
这里说一下token,一般是在登录完成之后,将用户的token通过localStorage或者cookie存在本地,然后用户每次在进入页面的时候(即在main.js中),会首先从本地存储中读取token,如果token存在说明用户已经登陆过,然后,在每次请求接口的时候,都会在请求的header中携带token,后台人员就可以根据你携带的token来判断你的登录是否过期,如果没有携带,则说明没有登录过。这时候或许有些小伙伴会有疑问了,就是每个请求都携带token,那么要是一个页面不需要用户登录就可以访问的怎么办呢?其实,你前端的请求可以携带token,但是后台可以选择不接收啊
响应的拦截
响应拦截器很好理解,就是服务器返回给我们的数据,我们在拿到之前可以对他进行一些处理。例如上面的思想:如果后台返回的数据里resCode不为0的话,根据错误返回的数据进行一些我们需要的错误提示和数据返回,如果等于0的话则正常返回数据
request方法
可以接收一系列的配置项
这里配置了请求接口的url地址,请求方法,和传入的参数
其他
还有一些get,post等方法,相信大家也不会陌生,axios对应的也有很多类似的方法,不清楚的可以看下文档,这里我就不过多的介绍了