如何使用 React 检查远程源是否可用？

Question

我想检查远程资源是否存在（例如一个非常大的 zip 文件。我不需要收集文件）。那么检查资源是否存在的最佳方法是什么？

Answer 1

您可以发出 HEAD 请求以查看 URL 是否存在。也许是这样的。

async function exists(url) {

  const result = await fetch(url, { method: 'HEAD' });

  return result.ok;

}

Answer 2

import React from "react";

import "./styles.css";

export default class App extends React.Component {

  state = { isFileExists: false };

  componentDidMount() {

    this.checkFIle(window.location.origin + "/files/FL_1.zip")

      .then(() => {

        this.setState({ isFileExists: true });

      })

      .catch(err => {

        this.setState({ isFileExists: false });

      });

  }

  checkFIle = async url => {

    return fetch(url, { method: "HEAD" });

  };

  render() {

    const { isFileExists } = this.state;

    return (

      <div className="App">

        {isFileExists && <p>File Exists</p>}

        {!isFileExists && <p>File Not Exists</p>}

      </div>

    );

  }

}

查看以下网址中的代码示例：

https://codesandbox.io/s/loving-napier-dpli5