5、axios网络请求封装以及登录前后端对接

本文介绍了在Vue项目中如何使用axios进行网络请求,包括axios的引入、封装处理错误、响应拦截器的设置,以及如何处理登录前后端对接。文章详细阐述了封装axios的过程,如添加请求拦截器处理公共参数,响应拦截器统一错误处理,以及通过Vue插件的形式简化方法调用。此外,还讨论了如何配置请求转发解决跨域问题,并给出了登录接口的数据格式注意事项。
摘要由CSDN通过智能技术生成

前端网络访问,主流方案就是Ajax,Vue也不例外,在Vue2.0之前,网络访问较多的采用vue-resources,Vue2.0以后,官方不再建议使用vue-resourves,这个项目也停止维护,目前建议使用的方案是axios。
axios是一个第三方的网络请求库,很多人一说Ajax就想到$ .Ajax()、$ .Post()、$ .Get(),这些是Ajax没错,但这些都是jQuery中封装的Ajax,并不是最原始的写法,如果用JavaScript,不用任何外部依赖的库一样也可以发送一个Ajax请求,那个对象就是JavaScript里面有个对象叫XMLHttpRquest,它才是最原始的Ajax请求,它里面有一些回调如onsuccess、onerror等等,那么这样就会有点麻烦,所以才会有一些封装的东西($ .Ajax()、$ .Post()、$ .Get())。那么JavaScript里面既然可以封装成这些,那当然也能封装成其他的,axios就是其中之一。
axios使用步骤很简单,首先在前端项目中引入axios
在这里插入图片描述
1、axios引入
安装axios网络请求库(npm install axios -S),安装完成后,按理说可以直接使用了,但是,一般在生产环境中,我们都需要对网络请求进行封装,因为网络请求可能会出错,这些错误有的是代码错误,也有的是业务错误,不管是哪一种错误,都需要开发者去处理,而我们不可能在每一次发送请求时,都去枚举各种错误情况,因此我们需要对前端请求进行封装,封装完成后,将 前端错误统一处理,这样开发者只需要在每一次发送请求的地方处理请求成功的情况。失败的情况统一去处理。
2、请求封装
在axios中,我们可以使用axios自带的拦截器来实现对错误的统一处理,axios中有请求拦截器,也有响应拦截器,请求拦截器中可以统一添加公共的请求参数,例如单点登陆这种token。响应拦截器则可以实现对错误的统一处理。另外一个需要注意的则是错误的展示需要使用一种通用的方式,而不可以和页面绑定(例如,登录失败在用户名或者密码输入框后面展示错误信息,不支持这种错误展示方式),这里推荐使用ElementUI中的MessageBox来展示错误信息,这是一个跟页面无关的组件。
在这里插入图片描述
封装后的axios如下:
在这里插入图片描述

import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(config => {
  return config;
}, err => {
  Message.error({message: '请求超时!'});
  // return Promise.resolve(err);
})

axios.interceptors.response.use(data => {//{data:{status:200,msg"",obj:{}},status:200}
  if (data.status && data.status == 200 && data.data.status == 500) {
    //业务逻辑错误
    Message.error({message: data.data.msg});
    return;
  }
  if (da
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值