axios详解 - 技术栈

1 axios 常规进行哪些配置封装

①首先创建一个Axios实例，在baseURL配置基础URL,并且可以根据不同的环境变量（.env文件）来进行设置

②调用Axios实例上的interceptors.request.use实现请求拦截，在请求拦截中判断一下用户是否在localstorage里存在token（登录时存储token），如果存在就添加到请求头里，如果不存在，则直接返回, 也可以对请求参数进行序列化操作( 使用 QS ,前提是有些服务判断要求的情况下)

③调用Axios实例上的interceptors.response.use实现响应拦截，在这里可以通过状态码来处理逻辑，如果是401，则表示token过期，这时候就要重定向到登录页面，如果是403，则表示该接口不存在，同样跳转到登录页。除此以外还可以进行一些统一的错误处理，如果全局拦截错读的响应码进行message提示等等。

其他可以进行的配置：https://www.yuque.com/wangwangwang-7cxiu/123456/vgeqqoqie44ptzaz
2 如何按指定次数重连

在拦截的错误err中解构出config，通过设置config.retry重连的最高次数，设置config.retryCount为已经重连的次数，然后判断config.retryCount是否大于等于config.retry的次数，大于则停止请求，否则config.retryCount重连次数加1

https://www.npmjs.com/package/axios-retry
3 当前页面请求还没有返回结果，已经离开关闭了当前页面怎么处理

使用 Axios 提供的取消请求的功能，以确保在离开页面时取消尚未完成的请求。这可以通过 Axios 的 CancelToken 来实现，在组件销毁前执行cancel
4 如何主动的中断请求

cancelToken是axios用来取消请求的API

创建一个CancelToken实例对象

const source = axios.CancelToken.source();

将CancelToken与请求配置一起传递

通过source.token获取token 赋值给请求配置的cancelToken属性

在需要中断请求的地方，调用cancel方法

source.cancel()
5 token和双token(jwt 当中的token和refreshToken)

登录操作，在后台服务器验证账号密码成功之后返回2个token：accessToken和refreshToken。

在进行服务器请求的时候，先将Token发送验证，如果accessToken有效，则正常返回请求结果；如果accessToken无效，则验证refreshToken。

此时如果refreshToken有效则返回请求结果和新的accessToken和新的refreshToken。如果refreshToken无效，则提示用户进行重新登陆操作。

复制代码

在这里插入代const jwt = require('jsonwebtoken');
const secretKey = 'secret';   // access token密钥
const refreshSecret = 'refreshSecret'; // refresh token密钥

function getAccessToken(req, res) {
    let { username, password } = req.body;   // 获取登录表单数据
    if (username && password) {             // 校验用户名和密码
        let accessToken = jwt.sign({ username }, secretKey, { expiresIn: '30m' });    // 生成30分钟过期access token
        let refreshToken = jwt.sign({ username }, refreshSecret);         // 生成无过期refresh token
        res.json({         // 返回access token和refresh token
            status: 'ok',
            accessToken,
            refreshToken
        })
    } else {
        res.json({
            status: 'error',
            message: '用户名或密码不能为空!'   // 登录表单校验失败,返回错误信息
        })
    }
}

function refreshToken(req, res) {    // refresh接口
    let { refreshToken } = req.body;   // 获取refresh token
    if (refreshToken) {                // 校验refresh token
        let decoded = jwt.verify(refreshToken, refreshSecret);
        // 验证refresh token
        let accessToken = jwt.sign({ username: decoded.username }, secretKey, { expiresIn: '30m' });
        // 生成新的30分钟access token  
        res.json({
                status: 'ok',
                accessToken    // 返回新的access token
        })
    } else {
        res.json({
            status: 'error',
            message: '刷新令牌不能为空!'   // refresh token校验失败,返回错误信息
        })
    }
}

app.post('/login', getAccessToken);   // 登录接口,获取token
app.post('/refresh', refreshToken);码片