标签: Snippets

fetch 和 axios 都支持使用AbortController的方式来取消请求。以 fetch 为例，想要取消请求，分为三步：

const url = "https://blog.yuchen.tech/";

// 1. 创建AbortController
const controller = new AbortController();
const signal = controller.signal;

// 2. 发送请求时传入AbortController的signal
fetch(url, { signal })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

// 3. 使用AbortController的abort方法来取消请求
controller.abort();
// Node 下输出
// DOMException [AbortError]: This operation was aborted
// 浏览器下输出
// DOMException: The user aborted a request.

Yuchen大约 2 分钟

蛇形布局

实现的效果如下图所示

查看源码

使用 flex 完成 m*n 的布局

首先使用 flex 完成一个简单的 m*n 布局

<template>
  <div class="container">
    <div class="item" v-for="(item, index) in list" :key="index">
      step{{ index + 1 }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const list = ref(new Array(12).fill(""));
</script>

<style lang="scss" scoped>
$colNum: 4; // 列数
$rowDistance: 40px; // 行间距
$colDistance: 30px; // 列间距

.container {
  display: flex;
  flex-wrap: wrap;
  gap: $rowDistance $colDistance;

  .item {
    width: calc((100% - $colDistance * ($colNum - 1)) / $colNum);
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
  }
}
</style>

Yuchen大约 9 分钟

snippets

存放一些自用的代码片段，方便复制粘贴

Yuchen小于 1 分钟

取消 Promise

蛇形布局

使用 flex 完成 m*n 的布局

snippets