黑马点评，后端请求没问题，前端页面有时候请求超时，无响应数据？

失败的发现过程

你看上面那里本来是有图片的，有时就没有，右边那里失败，连响应码都没有

然后我多刷几次就变成了下面不行了

开始怀疑是请求超时的问题，可以询问群友，但是大家貌似都没发现问题

怎么会这样？

在接口测试工具这里无论我发送多少次，都没有出现问题

逐渐发现问题所在，解决问题！！！

询问了ai也没有找到问题。最后上浏览器查找，发现有一个通过在前端的ajax请求延长请求时间成功了，我也跟着把ajax方法请求的timeout改成10秒，最后竟然成功了

xml 复制代码

 <script>
    //写在这位置对吗 对的
    axios.defaults.timeout = 3000;//全局配置
    axios.defaults.withCredentials = true;//这句代码必须写吗  必须 携带cookie保持会话
    const app = new Vue({
      el: "#app",
      data: {
        isReachBottom: false,
        types: [], // 类型列表
        blogs: [], // 播客列表
        current: 1,// blog的页码
      },
      created() {
        // 查询类型
        this.queryTypes();
        this.queryHotBlogsScroll();
      },
      methods: {
        queryTypes() {
          axios.get("/shop-type/list")
            .then(({ data }) => {
              this.types = data;
            })
            .catch(err => {
              console("分类错误");
              this.$message.error(err);
            })
        },
        queryHotBlogsScroll() {
          axios.get("/blog/hot?current=" + this.current)
            .then(({ data }) => {
              data.forEach(b => b.img = b.images.split(",")[0]);
              this.blogs = this.blogs.concat(data);
            })
            .catch(err => {
              this.$message.error(err)
            })
        },
        addLike(b) {
          axios.put("/blog/like/" + b.id)
            .then(({ data }) => {
              this.queryBlogById(b)
            })
            .catch(err => {
              this.$message.error(err)
            })
        },
        queryBlogById(b) {
          axios.get("/blog/" + b.id)
            .then(({ data }) => {
              b.liked = data.liked;
              b.isLike = data.isLike;
            })
            .catch(() => {
              this.$message.error
              b.liked++;
            })
        },
        onScroll(e) {
          let scrollTop = e.target.scrollTop;
          let offsetHeight = e.target.offsetHeight;
          let scrollHeight = e.target.scrollHeight;
          if (scrollTop + offsetHeight > scrollHeight && !this.isReachBottom) {
            this.isReachBottom = true

            // 再次查询下一页数据
            this.current++;
            this.queryHotBlogsScroll();
          } else {
            this.isReachBottom = false
          }
        },
        toShopList(id, name) {
          location.href = "/shop-list.html?type=" + id + "&name=" + name
        },
        toBlogDetail(b) {
          location.href = "/blog-detail.html?id=" + b.id
        }
      }
    })
  </script>

仍然感觉没有彻底解决，想找优化方案

但是感觉还是很疑惑，为什么变得怎么慢了，查询一个hot新闻需要两秒多？

最后通过ai提示说可能是nginx的配置问题我突然想起我在nginx的负载均衡配置设置了两个后端端口，而我在idea只启动了一个端口（- Nginx 配置了 upstream backend { 8081, 8082 }，但仅启动了 8081。），导致50%的请求转发到未启动的8082端口，造成超时！！最后把idea 的8081和8082端口都启动了，成功解决！

总结

超时直接结束：这是客户端（浏览器/Axios）的主动行为，需通过代码扩展重试逻辑。所以直接结束了这个方法，没有响应数据
本次错误根源：Nginx 配置和后端实例数量不匹配，导致请求失败率高达 50%。