React功能篇 - 封装网络请求库axios1.创建 httpload.js 文件2.创建api文件夹,将以下代码放入index.js3.react页面中调用4.刷新refreshToken 代码 [非必须,根据具体需求使用]

54 阅读 0 评论 36 点赞

我是靠谱客的博主追寻季节，最近开发中收集的这篇文章主要介绍React功能篇 - 封装网络请求库axios1.创建 httpload.js 文件2.创建api文件夹,将以下代码放入index.js3.react页面中调用4.刷新refreshToken 代码 [非必须,根据具体需求使用]，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

React封装axios请求库

1.创建 httpload.js 文件
2.创建api文件夹,将以下代码放入index.js
3.react页面中调用
4.刷新refreshToken 代码 [非必须,根据具体需求使用]

1.创建 httpload.js 文件

import axios from 'axios';
import { message } from 'antd';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

const http = axios.create({
  baseURL: process.env.REACT_APP_BASE_API, // 从.env变量中读取的后台url地址
  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(target) {
  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
    tempConfig = config;
    tempConfig.url = decodeURI(encodeURI(tempConfig.url).replace('%E2%80%8B', ''));
    if (config.headers.showLoading !== false) {
      showLoading(config.headers.loadingTarget);
    }
    const { token } = sessionStorage;
    if (token) {
      config.headers.common.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  err => {
    // 判断当前请求是否设置了不显示Loading
    if (tempConfig.headers.showLoading !== false) {
      hideLoading();
    }
    message.error('请求超时!');
    return Promise.resolve(err);
  }
);

// 响应拦截器
http.interceptors.response.use(
  response => {
    // 判断当前请求是否设置了不显示Loading（不显示自然无需隐藏）
    if (response.config.headers.showLoading !== false) {
      hideLoading();
    }
    return response;
  },
  error => {
    hideLoading();
    if (error.response && error.response.status) {
      switch (error.response.status) {
        case 401:
          // 如有刷新token的需求,可放开以下代码
          // var config=error.config;
          // refreshTokenFuc(isRefreshToken, config, retryRequests);
          message.error('登录信息已过期，请重新登录!');
          break;
        default:
          break;
      }
      return Promise.reject(error.response);
    }
    return Promise.reject(error.response);
  }
);

export default http;

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

api封装后导出供页面使用

import request from "@/http/httpload.js"
	export default{
		getData(data){
		return request({
			url:"/api/xxx",
			method:"post",
			data:data
		})
    },
    getIpAddress(data){
		return request({
			url:"/api/xxx",
			method:"get",
			parmas:data
		})
	}
}

3.react页面中调用

import React, { Component } from 'react';
import { Button, message } from 'antd';
import IPApi from '@/api/index';
class Http extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ipAddress: {}
    };
  }
  async getIp() {
    let res = await IPApi.getIpAddress('xxxx.xx.xx');
    message.success('查询IP成功');
    this.setState({
      ipAddress: res.data.data
    });
  }
  render() {
    return (
      <div>
        <div>{JSON.stringify(this.state.ipAddress)}</div>
        <Button onClick={() => this.getIp()}>网络请求</Button>
      </div>
    );
  }
}

export default Http;

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

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

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

let isRefreshToken = false;//是否正在刷新token
let retryRequests = []; //用于存储错误请求的数组
// 刷新token方法
function refreshTokenFuc(isRefreshToken, config, retryRequests) {
  if (!isRefreshToken) {
    isRefreshToken = true;
    var data = { refreshtoken: sessionStorage.refreshtoken }
    //TokenApi是自己封装的axios网络请求, 这里替换成你们自己请求后端刷新token的请求即可
    TokenApi.refreshToken(data).then(res => {
      sessionStorage.token = res.data.data.token.access_token;
      sessionStorage.refreshtoken = res.data.data.token.refresh_token;
      config.headers["Authorization"] = 'Bearer ' + res.data.data.token.access_token;
      retryRequests.forEach((cb) => cb(res.data.data.token.access_token));
      retryRequests = [];
      return http.request(config);
    }).catch(error => {
      message.error("身份验证失败，请重新登录!");
      sessionStorage.clear();
      setTimeout(() => {
        router.replace({
          path: '/login',
          // query: { redirect: router.currentRoute.fullPath }
        })
      }, 1500)
    }).finally(() => {
      isRefreshToken = false;
    })
  } else {
   //存储错误的请求,待刷新token完成后,重新发起请求
    return new Promise((resolve) => {
      retryRequests.push((token) => {
        config.headers["Authorization"] = 'Bearer ' + token;
        resolve(http.request(config))
      })
    })
  }
}