问题描述
手里的项目要开始支持SEO了, 有些页面的SEO信息, 需要动态获取, 也就意味着一部分页面的接口请求 , 要放在asyncData生性周期函数中,
在一些页面中的asyncData函数中, 可能需要已异步的方式同时获取多个接口数据, 就出现了这种代码:
1
2
3
4
5
6
|
export default {
async asyncData({$axios}){
const res = Promise.all([$axios.$get('getName'), $axios.get('getAge')])
return {}
}
}
|
假设项目中, 我们给$axios添加了如下拦截器
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// ~/plugins/axios.js
export default function({$axios}){
$axios.interceptors.request.use(config=>{
const time = Math.random()// 为每次请求
console.log('config time', time)
config.headers.time = time;
return config
})
$axios.interceptors.response.use(response=>{
console.log('response.config.headers.time', response.config.headers.time) // 请求结束后, 打印出本次请求中的headers.time信息
return response;
})
}
|
可以在控制台总看到
1
2
3
4
5
|
config time 0.24889528502294
config time 0.3372858023506302
response.config.headers.time 0.3372858023506302
response.config.headers.time 0.3372858023506302
|
从输出中可以发现, 虽然每次请求发出前我们添加的time字段是不同的, 但在请求返回时发现实际请求中的time值使用了同一个值
这个问题是nuxt本身自带的nuxt/axios包导致的
解决方案
既然是nuxt/axios包对axios做了自己的封装, 那就抛弃它, 依赖axios构建自己的http基础库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// ~/plugins/axios
import axios from 'axios'
const http = axios.create()
console.log('create http instance')
http.interceptors.request.use(config=>{
const time = Math.random()// 为每次请求
console.log('config time', time)
config.headers.time = time;
return config
})
http.interceptors.response.use(response=>{
// 请求结束后, 打印出本次请求中的headers.time信息
console.log('response.config.headers.time', response.config.headers.time)
return response;
})
export default http
|
此时再次刷新页面,控制台打印结果如下:
1
2
3
4
5
6
|
create http instance
config time 0.3431587508943157
config time 0.1979978322904119
response.config.headers.time 0.3431587508943157
response.config.headers.time 0.1979978322904119
|
扩展问题
在重构以上http基础库的时候, 发现了一些问题, 刷新10次页面, 可以看到控制台中输出了多次 create http instance , 如果生产环境中每次访问也都产生一个http的实例, 在高并发量的情况下, 可能导致内存占用率飞速提升
1
2
3
4
5
6
|
create http instance
create http instance
create http instance
create http instance
create http instance
create http instance (repeat 5 time)
|
但实际上, 在执行 yarn build && yarn start 后, 再多次刷新页面 create http instance 仅输出了一次, 说明Nuxt对于生产环境上的功能做了一些优化, 只会产生一个http实例.