在发送请求之前检查 api 端点是否存在 - axios

Question

我的 vue 应用程序中有 axios 请求：

async get_banner(id:number) : Promise<any> {
    return global.axios.get(`${process.env.VUE_APP_DOMAIN}/banners/${id}`)
}

它在 banner/${id} 响应退出时工作，但我遇到了我应该在我的管理面板中禁用横幅以便 api 端点变为空的情况。（不退出）所以我在我的 vue 应用程序控制台中得到 Request failed with status code 404。

问题是如何防止错误并知道url是否退出？这样做的最佳做法是什么？

Answer 1

如果不尝试（或依赖另一个 API 来获取前者 API 的状态）

，您无法判断 API 是否存在

这通常只是一种正确处理响应的方式。通常这看起来像这样...

  getTheBanner(id){
    this.errorMessage = null; // reset message on request init
    get_banner(id)
      .then(r => {
        // handle success
        this.results = r;
      })
      .catch(e => {
        // handle error
        if (e.status === 404){
          // set error message
          this.errorMessage = "Invalid banner Id";
        }
      })
  }

然后在你的模板中你可以有这样的东西

<div v-if="errorMessage" class="alert danger">{errorMessage}</div>

Answer 2

解释：

是的，你完全正确。这是 strapi 的默认行为。只要响应为空，它就会抛出 404 错误。这基本上是因为服务 return 中的 findOne 方法对控制器是空的，当控制器将它发送到 boom 模块时，它 return 是一个 404 Not Found 错误到前端。

解决方案：

当响应为空时，只需将控制器中的 find one 方法重写为 return 一个空对象 {}。

实施

// Path - yourproject/api/banner/controllers/banner.js

const { sanitizeEntity } = require('strapi-utils');

module.exports = {
  /**
   * Retrieve a record.
   *
   * @return {Object}
   */

  async findOne(ctx) {
    const { id } = ctx.params;

    const entity = await strapi.services.restaurant.findOne({ id });
    // in case no entity is found, just return emtpy object here. 
    if(!entity) return {};
    
    return sanitizeEntity(entity, { model: strapi.models.restaurant });
  },
};

旁注：

无需对浏览器端的 axios 实现进行任何更改。您应该始终在控制器而不是客户端处理此类情况。

参考：

Backend Customizations

在发送请求之前检查 api 端点是否存在 - axios

check if api endpoint exits before send request - axios

strapi

axios

vuejs3

解释：

解决方案：

实施

旁注：

参考：