vue--axios的简单介绍及使⽤场景
1.axios 简单介绍
// 添加⼀个请求
quest.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
ject(error);
});
// 添加⼀个响应
sponse.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
ject(error);
});
如果之后想移除你可以这么做
var myInterceptor = quest.use(function () {/*...*/});
quest.eject(myInterceptor);
2.vue 添加 axios
1. 安装 axios
npm install axios --save-dev
2. 新建⽂件 axios.js
import axios from'axios'
// 配置默认的 host, 假如你的 API host 是: api.htmlx.club
axios.defaults.baseURL = 'api.htmlx.club'
// 添加请求
quest.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
/
/ 对请求错误做些什么
ject(error)
});
// 添加响应
sponse.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
ject(error)
});
3. 在 main.js 中进⾏引⽤, 并配置⼀个别名 ($ajax) 来进⾏调⽤:
import axios from'axios'
import '../axios.js'//axios.js 的路径
Vue.prototype.$ajax = axios
4. 应⽤, ⼀个登录的 post 如:
this.$ajax({
method: 'post',
url: '/login',
data: {
'userName': 'xxx',
'password': 'xxx'
}
}).then(res => {
console.log(res)
})
3. 使⽤场景
3.1 axios 对路由进⾏拦截
针对登录拦截逻辑来看⼀下
1. 路由拦截
⾸先在定义路由的时候就需要多添加⼀个⾃定义字段 requireAuth, ⽤于判断该路由的访问是否需要登录. 如果⽤户已经登录, 则顺利进⼊路由,
否则就进⼊登录页⾯.
const routes = [
{
path: '/',
name: '/',
component: Index
},
{
path: '/repository',
name: 'repository',
meta: {
indexof能用于数组吗requireAuth: true,  // 添加该字段, 表⽰进⼊这个路由是需要登录的
},
component: Repository
},
{
path: '/login',
name: 'login',
component: Login
}
];
定义完路由后, 我们主要是利⽤ vue-router 提供的钩⼦函数 beforeEach()对路由进⾏判断.
router.beforeEach((to, from, next) => {
if (quireAuth) {  // 判断该路由是否需要登录权限
if (ken) {  // 通过 vuex state 获取当前的 token 是否存在
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath}  // 将跳转的路由 path 作为参数, 登录成功后跳转到该路由
})
}
}
else {
next();
}
}
其中, to.meta 中是我们⾃定义的数据, 其中就包括我们刚刚定义的 requireAuth 字段. 通过这个字段来判断该路由是否需要登录权限. 需要的话, 同时当前应⽤不存在 token, 则跳转到登录页⾯, 进⾏登录. 登录成功后跳转到⽬标路由.
登录拦截到这⾥就结束了吗? 并没有. 这种⽅式只是简单的前端路由控制, 并不能真正阻⽌⽤户访问需要登录权限的路由. 还有⼀种情况便是：当前 token 失效了, 但是 token 依然保存在本地. 这时候你去访问需要登录权限的路由时, 实际上应该让⽤户重新登录.
这时候就需要结合 http + 后端接⼝返回的 http 状态码来判断.
2.
要想统⼀处理所有 http 请求和响应, 就得⽤上 axios 的. 通过配置 http response inteceptor, 当后端接⼝返回 401 Unauthorized(未授权), 让⽤户重新登录.
// http request
quest.use(
config => {
if (ken) {  // 判断是否存在 token, 如果存在的话, 则每个 http header 都加上 token
config.headers.Authorization = `token ${ken}`;
}
return config;
},
err => {
ject(err);
});
/
/ http response
sponse.use(
response => {
return response;
},
error => {
if (sponse) {
switch (sponse.status) {
case401:
// 返回 401 清除 token 信息并跳转到登录页⾯
storemit(types.LOGOUT);
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
sponse.data)  // 返回接⼝返回的错误信息
});
3.2 axios 对 http 请求的响应状态统⼀进⾏处理
⾸先我们要明⽩设置的⽬的是什么, 当我们需要统⼀处理 http 请求和响应时我们通过设置处理⽅便很多.
这个项⽬我引⼊了 element ui 框架, 所以我是结合 element 中 loading 和 message 组件来处理的. 我们可以单独建⽴⼀个 http 的 js ⽂件处理axios, 再到 main.js 中引⼊.
/**
* http 配置
*/
// 引⼊ axios 以及 element ui 中的 loading 和 message 组件
import axios from'axios'
import { Loading, Message } from'element-ui'
// 超时时间
axios.defaults.timeout = 5000
// http 请求
var loadinginstace
quest.use(config => {
// element ui Loading ⽅法
loadinginstace = Loading.service({ fullscreen: true })
return config
}, error => {
loadinginstace.close()
<({
message: '加载超时'
})
ject(error)
})
/
/ http 响应
sponse.use(data => {// 响应成功关闭 loading
loadinginstace.close()
return data
}, error => {
loadinginstace.close()
<({
message: '加载失败'
})
ject(error)
})
export default axios
3.3 axios 对重复请求的处理
axios 官⽅⽂档上给了两种取消请求的⽅式.
轻查看: vue axios 在切换路由时如何取消所有请求 --cancelToken
根据⽂档上的第⼆种⽅法, 我们可以在⾥统⼀处理取消重复请求
let pending = []; // 声明⼀个数组⽤于存储每个 ajax 请求的取消函数和 ajax 标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
for(let p in pending){
if(pending[p].u === config.url + '&' + hod) { // 当当前请求在数组中存在时执⾏函数体
pending[p].f(); // 执⾏取消操作
pending.splice(p, 1); // 把这条记录从数组中移除
}
}
}
// 添加请求
quest.use(config=>{
removePending(config); // 在⼀个 ajax 发送前执⾏⼀下取消操作
config.cancelToken = new cancelToken((c)=>{
// 这⾥的 ajax 标识我是⽤请求地址 & 请求⽅式拼接的字符串, 当然你可以选择其他的⼀些⽅式
pending.push({ u: config.url + '&' + hod, f: c });
});
return config;
},error => {
ject(error);
});
// 添加响应
sponse.use(response=>{
fig);  // 在⼀个 ajax 响应后再执⾏⼀下取消操作, 把已经完成的请求从 pending 中移除
return response;
},error =>{
return { data: { } }; 返回⼀个空对象, 主要是防⽌控制台报错
});
同⼀个请求, 没有完成的请求将被取消
利⽤这个⽅法, ⼀⽅⾯可以防⽌重复点击不同页码导致的表格数据闪烁, 另外可以做实时搜索, 始终获取最新结果.
最后取消重复请求会有些问题. 第⼆次请求时后台已经接收到了请求. 还是会⽣成 2 次相同的数据. 下⾯是对应的处理: let pending = []
let CancelToken = axios.CancelToken
let removePending = (config, f) => {
let flagUrl = config.url + '&' + hod
if (pending.indexOf(flagUrl) !== -1) {
if (f) {
f() // 执⾏取消操作
} else {
pending.splice(pending.indexOf(flagUrl), 1)// 把这条记录从数组中移除
}
} else {
if (f) {
pending.push(flagUrl)
}
}
}
// http request
quest.use(
config => {
if (hod === 'post') {
console.log('我是拦截')
config.cancelToken = new CancelToken((c) => {
removePending(config, c)
})
}
return config
},
err => {
ject(err)
})
/
/ http response
sponse.use(
response => {
if (hod === 'post') {
fig)
}
return response
},
error => {
pending = []
return { data: {error: error} } // 返回接⼝返回的错误信息
})
第⼀种适合 tabs, 分页等快速来回点击的情况, 取消之前的请求, 保持最近的⼀次请求.
第⼆种适合相同的接⼝被请求了多次, 只留第⼀次, 其他的都取消请求.
1.axios 简单介绍
1. // 添加⼀个请求
2. quest.use(function(config){
3. // Do something before request is sent
4. return config;
5. },function(error){
6. // Do something with request error
7. ject(error);
8. });
9. // 添加⼀个响应
10. sponse.use(function(response){
11. // Do something with response data
12. return response;
13. },function(error){
14. // Do something with response error
15. ject(error);
16. });
如果之后想移除你可以这么做
1. var myInterceptor = quest.use(function(){/*...*/});
2. quest.eject(myInterceptor);
2.vue 添加 axios
1. 安装 axios
npm install axios --save-dev
2. 新建⽂件 axios.js
1. import axios from'axios'
2. // 配置默认的 host, 假如你的 API host 是: lub
3. axios.defaults.baseURL ='api.htmlx.club'
4. // 添加请求
5. quest.use(function(config){
6. // 在发送请求之前做些什么
7. return config
8. },function(error){
9. // 对请求错误做些什么
10. ject(error)
11. });
12. // 添加响应
13. sponse.use(function(response){
14. // 对响应数据做点什么
15. return response
16. },function(error){
17. // 对响应错误做点什么
18. ject(error)
19. });
3. 在 main.js 中进⾏引⽤, 并配置⼀个别名 ($ajax) 来进⾏调⽤:
1. import axios from'axios'
2. import'../axios.js'//axios.js 的路径
3. Vue.prototype.$ajax = axios
4. 应⽤, ⼀个登录的 post 如:
1. this.$ajax({
2. method:'post',
3. url:'/login',
4. data:{
5. 'userName':'xxx',
6. 'password':'xxx'
7. }
8. }).then(res =>{
9. console.log(res)
10. })
3. 使⽤场景
3.1 axios 对路由进⾏拦截
针对登录拦截逻辑来看⼀下
1. 路由拦截
⾸先在定义路由的时候就需要多添加⼀个⾃定义字段 requireAuth, ⽤于判断该路由的访问是否需要登录. 如果⽤户已经登录, 则顺利进⼊路由，否则就进⼊登录页⾯.
1. const routes =[
2. {
3. path:'/',
4. name:'/',
5. component:Index
6. },
7. {
8. path:'/repository',
9. name:'repository',
10. meta:{
11. requireAuth:true,// 添加该字段, 表⽰进⼊这个路由是需要登录的
12. },
13. component:Repository
14. },
15. {
16. path:'/login',
17. name:'login',
18. component:Login
19. }
20. ];

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。