当前位置:   article > 正文

Vue功能篇 - 3.封装axios请求库,支持取消请求和刷新token_vue页面刷新取消请求

vue页面刷新取消请求

每个项目的需求各有偏差,务必根据自己的项目调整相关配置
如大家有什么好的建议,可在评论区回复!

  • 动态地址(需注释baseUrl)
    - 在public创建config.js,里面为api地址
    - 各个api文件夹中引入即可,然后拼接到api上
  • 静态地址
    配置baseUrl即可

1.创建 httpload.js 文件

import qs from 'qs';
import axios from 'axios';
import { message } from 'element-plus';
import router from '../router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
message.config({
  duration: 2,
  maxCount: 3
});
NProgress.configure({ showSpinner: false });

const http = axios.create({
    baseURL: process.env.API_HOST, //设置请求的base url,也可不设置这里,在api文件里直接拼接api
    timeout: 300000, //超时时长5分钟,
    crossDomain: true
});

http.defaults.headers.post['Content-Type'] ='multipart/form-data;application/json;charset=UTF-8;';

//当前正在请求的数量
let needLoadingRequestCount = 0;

// 显示loading
function showLoading() {
  // 后面这个判断很重要,因为关闭时加了抖动,此时loading对象可能还存在,
  // 但needLoadingRequestCount已经变成0.避免这种情况下会重新创建个loading
  if (needLoadingRequestCount === 0) {
    NProgress.start();
  }
  needLoadingRequestCount++;
}

// 隐藏loading
function hideLoading() {
  needLoadingRequestCount--;
  needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); // 做个保护
  if (needLoadingRequestCount === 0) {
    NProgress.done();
  }
}


//添加请求拦截器
let tempConfig = '';
http.interceptors.request.use(config => {
    //判断当前请求是否设置了不显示Loading
    if (config.headers.showLoading !== false) {
        showLoading();
    }
    config.url = decodeURI(encodeURI(config.url).replace('%E2%80%8B', "")) //去除url中的空格
    const token = sessionStorage.token;
    if (token) {
        config.headers.common["Authorization"] = 'Bearer' + token;
    }
    tempConfig = config;
    return config;
}, err => {
    //判断当前请求是否设置了不显示Loading
    if (config.headers.showLoading !== false) {
        hideLoading();
    }
    message.error('请求超时!');
    return Promise.resolve(err);
});

//响应拦截器
http.interceptors.response.use(
    response => {
        //判断当前请求是否设置了不显示Loading(不显示自然无需隐藏)
        if (response.config.headers.showLoading !== false) {
            hideLoading();
        }
     //如有刷新token的需求,可放开以下代码
    //if (response.status === 401) {
      //return refreshTokenFuc(tempConfig);
   // }
	return response;
    },
    error => {
        hideLoading();
		if(error.response&&error.response.status){
			switch (error.response.status) {
				//401: 未登录-授权过期
				case 401:
				//如有刷新token的需求,可放开以下代码
				//return refreshTokenFuc(error.config);
				break;
				case 500:
				 message.error(error.response.data.message);
				break;
				case 503:
				 message.error('温馨提示:服务不可用,状态码:503');
				break;
			}
			return Promise.reject(error.response);
		}
		  if (axios.isCancel(error)) {
      		//取消请求
    	  } else {
     	  message.error('服务器打瞌睡了');
    		}
        return Promise.reject(error.response);
    }
);

export default http;


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109

2.创建api文件夹,将以下代码放入index.js

  • api封装后导出供页面使用
  • 可以直接拼接url,此时可不配置httpload里的baseurl
import request from "@/http/httpload.js"
	export default{
		getData(data){
		return request({
			url:"/api/xxx",
			method:"post",
			data:data
		})
    },
    getManyData(data){
		return request({
			url:"/api/xxx",
			method:"get",
			parmas:data
		})
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

3.vue页面中调用

<template>
  <div>
    <el-button class="el-icon-user" @click="getData">获取数据</el-button>
  </div>
</template>
<script>
import Task from "@/api/index.js";
export default {
  name: "testDemo",
  methods: {
    getData() {
      var data={id:'xxxxxxx'}
      Task.getData(data).then(res => {
         console.log(res);
      }).catch(error=>{
        console.log(error);
      });
    }
  }
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

4.刷新refreshToken 代码 [非必须,根据具体需求使用]

如有刷新token的需求,将以下代码放入httpload.js文件中即可,
注:以下代码必须放到 响应拦截请求前

待解决问题:刷新refreshToken后,新Token获取正常,并重新自动请求了之前错误的请求,数据返回是正常的,但页面并不会重新渲染,因为数据请求时已经catch了! 目前暂无好的解决方法,需要用户点击一下页面上任意的按钮或者刷新页面即可

//页面重定向
function pageRedirect() {
  message.error('登录信息已过期,请重新登录!');
  setTimeout(() => {
    //routeRedirect(); 跳转页面
  }, 1500);
}

//检测值是否存在
function checkRefreshIsExit(token) {
  if (!token || token === null || token === 'undefined') {
    return false;
  }
  return true;
}

let isRefreshToken = false; // 正在刷新token
let refreshCount = 0;
// 刷新token方法
async function refreshTokenFuc(config) {
  refreshCount++;
  if (!isRefreshToken) {
    const temp = {
      client_id: 'login',
      client_secret: '123456',
      grant_type: 'refresh_token',
      refresh_token: isUseBaseToken ? sessionStorage.refreshBaseToken : sessionStorage.refreshToken,
    };
    const isExitToken = await checkRefreshIsExit(temp.refresh_token);
    if (!isExitToken) {
      pageRedirect();
      return;
    }
    return TokenApi.userToken(temp).then((res) => {
      isRefreshToken = true;
      const { data } = res;
      if (data.code > -1) {
         let tempToken = data.access_token;
          sessionStorage.baseToken = data.access_token;
          sessionStorage.refreshBaseToken = data.refresh_token;
        
        config.headers.Authorization = `Bearer ${tempToken}`;
        return http(config);
      } else {
        pageRedirect();
      }

    }).catch((error) => {
      if (refreshCount === 3 || error.status === 400 || !sessionStorage.baseToken) {
        pageRedirect();
      } else {
        refreshTokenFuc(config);
      }
    }).finally(() => {
      refreshCount = 0;
      isRefreshToken = false;
    })
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

5.取消请求及阻止重复请求 [非必须,根据具体需求使用]

通过AbortController将多次访问的api取消

let httpList = [];

const removeHttp = config => {
  const { method, url, params, data } = config;
  const requestKey = [method, url, qs.stringify(params), qs.stringify(data)].join('&');
  let index = httpList.findIndex(v => {
    const tempRequestKey = [v.method, v.url, qs.stringify(v.params), qs.stringify(v.data)].join('&');
    if (requestKey === tempRequestKey) {
      return true;
    }
  });
  if (index >= 0) {
    httpList[index].controller.abort();
    httpList.splice(index, 1);
  }
}


http.interceptors.request.use(
  (config) => {
  removeHttp(config);
  //....其它省略
  
  //增加自动取消重复请求功能
    const controller = new AbortController();
    config.signal = controller.signal;
    config.controller = controller;
    httpList.push({ ...config });
}


// 响应拦截器
http.interceptors.response.use(
  (response) => {
    //.....其它省略
  },
  (error) => {
  //.....其它省略
  if (axios.isCancel(error)) {
      //取消请求
    } else {
      message.error('温馨提示:数据获取失败');
    }
  //.....其它省略
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/715629
推荐阅读
相关标签
  

闽ICP备14008679号