Ts的高级内容

别指望了
541 阅读3分钟

ts的异步处理

1.1 在 TypeScript 中实现异步编程时，async/await 是一种非常优雅且易于理解的方式。

image.png

asyncOperation 是一个异步函数，返回一个 Promise。在 run 函数中，我们使用 await 关键字来等待 asyncOperation 的结果

image.png

  • async function asyncOperation() ：定义一个名为 asyncOperation 的异步函数。使用 async 关键字表明该函数内部可能会有异步操作，并且函数会返回一个 Promise 对象。
  • : Promise<number> ：该函数的返回类型是 Promise<number>，表示这个函数返回一个 Promise，该 Promise 最终会解析为一个数字（number）。
  • return new Promise(...) ：返回一个新的 Promise 实例。Promise 是 JavaScript 中用于处理异步操作的对象。
  • (resolve, reject) ：传入一个函数，该函数有两个参数：resolve 和 reject。这两个参数都是函数，用于分别解决或拒绝这个 Promise。
  • setTimeout(...) ：设置一个定时器，在指定的时间后执行给定的回调函数。
  • () => resolve(10) ：这是一个箭头函数，当定时器到期后会执行它，调用 resolve 函数并传入 10，这意味着 Promise 会被解决（fulfilled），并返回值 10。
  • 100：定时器的延迟时间，以毫秒为单位。在这个例子中，定时器将在 100 毫秒后触发。

image.png 我们创建了两个异步函数，每一个都返回一个 Promise，并在100毫秒后解决。然后我们在 run 函数中使用 await 关键字来等待每一个 Promise 的结果，并将它们相加。

asyncOperation 函数抛出一个错误。我们在 run 函数中使用 try...catch 块 来捕获并处理这个错误。

async function asyncOperation1(): Promise<number> {
    return new Promise((resolve) => {
        setTimeout(() => resolve(10), 100);
    });
}
 
async function asyncOperation2(): Promise<number> {
    return new Promise((resolve) => {
        setTimeout(() => resolve(20), 100);
    });
}
 
async function run() {
    const [result1, result2] = await Promise.all([asyncOperation1(), asyncOperation2()]);
    console.log(result1 + result2);  // 30
}
 
run();

get和post请求

Node.js的下载地址：

Node.js — 下载 Node.js® (nodejs.org)

image.png

好了，经过一系列的操作我的vitt可以跑起来了，直接跳过下一步。

单文件组件

在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。 HelloWorld.vue就是一个单文件组件。 image.png

javascriptCopy Code
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
  • <script setup lang="ts"> : 使用 TypeScript 编写组件的逻辑，setup 是一种更简洁的 API。
  • import { ref } from 'vue' : 引入 Vue 的 ref 函数，用于创建响应式变量。
  • defineProps<{ msg: string }>() : 定义组件的 props，表明该组件接收一个字符串类型的 msg 属性。
  • const count = ref(0) : 创建一个响应式变量 count，初始值为 0，用于跟踪点击按钮的次数。

html

htmlCopy Code
<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">Vue Docs Scaling up Guide</a>.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
  • <template> : 定义了组件的用户界面。
  • <h1>{{ msg }}</h1> : 动态显示传入的 msg 属性。
  • 按钮: 点击按钮会增加 count 的值，并显示当前的计数。
  • 链接: 提供了指向 Vue 文档的链接。

CSS 部分

cssCopy Code
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
  • <style scoped> : 定义组件的样式，scoped 确保样式只作用于该组件，避免与其他组件的样式冲突。
  • .read-the-docs: 设定了该类的文本颜色为 #888。

1.1 安装 Axios

注意：在工程目录下安装，不是全局安装。

1.2 导入Axios的命令

image.png

1.3使用Axios提供的方法（get、post等）去发送网络请求

<script setup lang='ts'>
// 发起 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
 
// 发起 POST 请求
axios.post('https://api.example.com/data', { name: 'John', age: 25 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
</script>

`

avatar
文章
阅读
粉丝