(共556篇)
全部分类

nuxt2提供的axios在SSR期间header数据混乱
[ Nuxt ] 

问题描述 手里的项目要开始支持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实例.

1
create http instance