需求

监听请求到响应的时间在多个页面进行耗时展示

实现

请求拦截器设置请求时间

service.interceptors.request.use(
    config => {
        config.headers['request-startTime'] = new Date().getTime()
        if (store.getters.token) {
            config.headers['token'] = getToken()
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

响应拦截器计算花费时间

const start = response.config.headers['request-startTime']
const currentTime = new Date().getTime()
const requestDuration = ((currentTime - start)/1000).toFixed(2)

将时间同结果一起返回，需要使用的地方直接获取即可

result.requestDuration = requestDuration
return result

效果

补充

ps:中间逻辑省略

使用时的问题

会遇到拿到的result不是一个对象，无法扩展属性（需求都是应用在表格里，返的都是对象，未考虑其他情况）
解决：

if (Object.prototype.toString.call(result) === '[object Object]') {
      result.requestDuration = requestDuration
    }
    return result