【H5】取消发送中的请求

以前的前端发出了一个 Web 请求后是没法中止掉该请求的。如果是上传文件，就只能等待该请求发完，除非手动刷新当前的页面。新出的AbortController接口支持根据需要中止一个或多个 Web 请求，这个接口仅支持一些较新的浏览器。兼容性检查

在 axios 里的用法：

const controller = new AbortController();

axios
  .get("/foo/bar", {
    signal: controller.signal,
  })
  .then(function (response) {
    //...
  });
// cancel the request
controller.abort();

集成在 Vue 里的用法:

export default {
  data() {
    return {
      controller: new AbortController(),
    };
  },
  methods: {
    closed() {
      this.controller.abort(); // 会把所有带这个参数的请求全都终止掉
    },
    async uploadFile(file, url) {
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        signal: this.controller.signal, // important!
      };
      await axios.put(url, file, config);
    },
  },
};