axios的使用(请求,响应拦截器)
axios的使用本篇博客简要讲述本人在前端vue开发过程中对于axios的理解文章目录axios的使用前言一、axios是什么?二、使用步骤1.引入库总结前言作为一个刚刚出门的小实习生,在我现有的开发生涯中,前端网络数据请求上我就使用过vue-resource,axios。在学校学习时使用vue2x接触到的vue-resource,开始实习后接触到axios。然后就一直使用axios,在接触到多个
axios的使用
本篇博客简要讲述本人在前端vue开发过程中对于axios的理解
文章目录
前言
作为一个刚刚出门的小实习生,在我现有的开发生涯中,前端网络数据请求上我就使用过vue-resource,axios。在学校学习时使用vue2x接触到的vue-resource,开始实习后接触到axios。然后就一直使用axios,在接触到多个项目后,想要对axios做一个小小的总结,便于以后更灵活地使用。
一、axios是什么?
在axios之前,vue使用的是vue-resource,我目前知道的vue-resource被替代的原因是不在进行维护和更新。本人也没有使用vue-resource的拦截器和请求器。
Axios是一个基于Promise的Http库(可以实现异步),用在浏览器端和NodeJS 的异步通信框架。
前端通信大部分都是基于XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。
Axios功能特点
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API【JS中链式编程】
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
二、使用步骤
1.引入库
代码如下(示例):
npm axios from 'axios'
安装完毕后可以在main.js中引入,也可以在axios.js中直接使用。我目前使用的方式为urls.js中写接口的路径,axios.js中写拦截器的逻辑,对请求做一些设置。token处理,在api.js中调用axios,urls完成接口的实现。
axios在使用时不需要use,主要原因时axios并不同于主要供给vue使用的模块,axios是通用化ajax库,这种库可以用vue.prototype继承方法,然后this调用。
2.axios使用
先创建axios实例,创建axios实例的方法多种多样
1,引用axios后直接设置配置,这种配置方式会影响到所有的接口,本人在目前实习阶段就是采用这种写法较多
这里我是将所有的接口地址都写在urls.js下,这里的baseURL可以根据生产环境配置
if(process.env.NODE_ENV === 'development') {
baseURL = 'xxx本地环境xxx';
} else if(process.env.NODE_ENV === 'production') {
baseURL = 'xxx生产环境xxx';
}
npm axios from 'axios'
// 携带Cookie
axios.defaults.baseURL = urls.BASE_URL
axios.defaults.withCredentials = true
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
// 默认Post请求使用 application/json 形式
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.timeout = 10000
2,第二种方法就是实例化一个axios对象,这个方法主要的好处就是创建多个axios,一部分接口用一部分axios,属性也都可以设置
let newAxios = axios.create({
baseURL: 'xxxxx',
timeout: 1000,
withCredentials:true
在第二种的基础上可以针对个别接口进行设置
instance.get('/xxx',{
timeout: 5000
})
注意点:
axios的配置,以及请求拦截器,是对请求体的一个封装,设置多种多样。请求中需要的都可以进行设置,例如处理一些数据流。在进行图片下载,excel下载的时候非常关键。
axios请求拦截器
这个时候拦截下来的请求还没有发出,在这个是时候我们可以对这个请求进行各种操作,高级一点的拦截器,还可以根据请求发出的一些信息,进行过滤。例如,一些接口需要token或者其他的登录信息。往往会在后端进行验证,但是在程序请求量非常大的时候,可以在前端进行验证,请求中没有的必要信息的时候进行拦截。
axios.interceptors.request.use(res => {
// 封装请求
...
return res
}, err => {
// 请求出现错误时回调
return Promise.reject(err)
})
axios响应拦截器
//
axios.interceptors.reponse.use(res => {
// 对结果数据进行操作
return res
}, err => {
//接口处理错误
return Promise.reject(err)
})
注意:这里的接口错误是接口请求出现错误。有时需要在数据结构操作逻辑里进行错误判断。以及进行错误信息的弹出,例如code为401等错误信息。
// 响应拦截器
axios.interceptors.response.use(
res => {
// console.log(res)
if (res.config && !res.config.headers.Authorization && res.config.url.endsWith(urls.common.LOGIN)) {
tokenHelper.setToken(res.headers.authorization)
}
if (res.data.code != 200) {
if (res.data.code == 401) {
ElMessage.error(res.data.msg || '登录状态失效,请重新登录')
router.push('/')
} else if (res.data.msg) {
ElMessage.error(res.data.msg)
}
return Promise.reject(res.data)
}
if (res.data.total || res.data.total == 0) {
//分页接口使用时更为方便,少写一个data
return {
data: res.data.data,
total: res.data.total
}
} else {
return res.data.data
}
},
更多推荐
所有评论(0)