前端网络访问,主流方案就是Ajax, Vue也不例外,在Vue2.0之前,网络访问较多的采用vue-resources, Vue2.0之后,官方不再建议使用vue-resources,这个项目本身也停止维护,目前建议使用的方案是axios。今天松哥就带大家来看看axios的使用。
axios使用步骤很简单,首先在前端项目中,引入axios:
<代码> npm安装axios - s
装好之后,按理说可以直接使用了,但是,一般在生产环境中,我们都需要对网络请求进行封装。
因为网络请求可能会出错,这些错误有的是代码错误导致的,也有的是业务错误,不管是哪一种错误,都需要开发者去处理,而我们不可能在每一次发送请求时都去枚举各种错误情况。
因此我们需要对前端请求进行封装,封装完成后,将前端错误统一处理,这样,开发者只需要在每一次发送请求的地方处理请求成功的情况即可。
在axios中,我们可以使用axios自带的拦截器来实现对错误的统一处理。
在axios中,有请求拦截器,也有响应拦截器。
请求拦截器中可以统一添加公共的请求参数,例如单点登录中前端统一添加牌参数。
响应拦截器则可以实现对错误的统一处理。
另外一个需要注意的地方则是错误的展示需要使用一种通用的方式,而不可以和页面绑定(例如,登录失败,在用户名/密码输入框后面展示错误信息,不支持这种错误显示方式),这里推荐使用ElementUI中的按摩来展示错误信息,这是一个页面无关的组件。
封装后的axios如下:
代码解释:
1。首先导入axios和按摩组件
2.接下来定义一个请求拦截器
3.最后定义一个响应拦截器,这个拦截器有两个参数,第一个参数数据表示服务端处理成功的响应,第二个犯错表示服务端处理失败的响应。对照着jQuery中的Ajax,第一个相当于成功回调,第二个相当于错误回调。
4.响应的数据表示服务端返回的数据,数据格式是{数据:{味精”状态:200年,obj:{}},状态:200}其中,数据中的对象就是服务端返回的具体的JSON,外面的状态表示HTTP响应码,里边的地位是自定义的RespBean中返回的数据
5.首先判断HTTP响应码为200,并且服务端返回的状态为500,表示业务逻辑错误,此时直接通过消息将错误信息展示出来,然后返回即可。
6.如果服务端返回的字段中包含味精,则将味精显示出来,这个味精一般是成功的提示。
7.最后返回数据。数据,即将服务端返回的数据,这个数据最终会来到请求调用的地方。
8.当HTTP响应码大于等于400时,进入犯错中。
请求封装完成后,还需要对方法进行封装,方便调用:
