xianshenglu

xianshenglu 查看完整档案

上海编辑南京审计学院  |  金融 编辑MicroFocus(前惠普)  |  前端工程师 编辑 xianshenglu.xyz 编辑
编辑

简单、高性能

个人动态

xianshenglu 回答了问题 · 4月7日

async/await 执行顺序问题

不好意思,来晚了。

问题的关键点是 async 的实现和 await 的实现不同,也可以说是语义不同,前者采用的 RESOLVE 语义,后者采用的是 Promise.resolve 语义,RESOLVE 语义比 Promise.resolve 语义,在处理 promise 要慢一拍。

我之前在博客里有提到类似的例子

const p1 = Promise.resolve(1)
const async1 = async () => {
  return p1
}
async1().then(res => {
  console.log(res)
})
p1.then(res => {
  console.log(2)
}).then(res => {
  console.log(3)
})

最终等价于

const p1 = Promise.resolve(1)
const async1 = () => {
  return new Promise(resolve => {
    return Promise.resolve().then(() => {
      p1.then(resolve)
    })
  })
}
async1().then(res => {
  console.log(res)
})
p1.then(res => {
  console.log(2)
}).then(res => {
  console.log(3)
})

就是解释的 async 的语义和实现问题,题主可以去翻一下就能明白了。

关注 3 回答 2

xianshenglu 赞了回答 · 3月30日

为什么Vue3.0没有弃用optionsAPI?

我觉得就是他的特色吧。

渐进式框架,想用什么你就用什么,官方提供了挺多的方法。

而且一直来讲 vue 支持的东西就很多,里面有一些东西根本就没用过。当然,也是为了兼容,总不能让升级版本的人通通大改吧。

image.png

关注 5 回答 4

xianshenglu 关注了问题 · 3月24日

async/await 执行顺序问题

题目描述

async function foo() {
    return Promise.resolve(300)
    // return 300 // ❓问题:上下两种写法执行结果不一致的原因是什么呢?return 300 不等价于 return Promise.resolve(300) 吗
}
// debugger
;(async function () {
    console.log("start") // 1. 立即执行函数 会先执行这一步
    const p1 = Promise.resolve(100)
    const data1 = await p1 // 2. 遇到 await 后面代码放入微任务队列 第一位
    console.log("data1", data1) // 5. 同步代码执行完成 进入微任务队列 打印 data1 100
    const data2 = await 200 // 5. 执行 Promise.resolve(200) 之后代码放入微任务队列 第三位
    console.log("data2", data2) // 7. 进入微任务队列 打印 data2 200 
    const data3 = await foo() // 8. 执行foo() 之后代码放入微任务队列第四位
    console.log("data3", data3) // 9. 打印
})()
const res = foo()
console.log(res) // 3. 继续执行同步代码 执行此句 打印一个 promise
res.then((data) => { // 4. 我认为这是promise的状态已经是resolve,所以应该放入微任务队列的第二个位置 ❓问题:但实际上并不是这样,为什么?
    // ⚠️ 这个要等res 完全resolved之后才会执行 ❓问题:到底什么时候会被resolved 呢?
    console.log("data", data) // 6.执行微任务队列第二位 打印 ❓问题:为什么 data 200 在data1 data2 之后打印, 在data3 之前打印呢?
})

当foo()内返回return Promise.resolve(300)时如下图

image.png

当foo()内返回return 300时如下图,这个图与我理想的执行结果一致

image.png

自己的思路

我的思路、执行顺序都在代码注释里

你期待的结果是什么?实际看到的错误信息又是什么?

我期待的结果是:foo()方法中代码为 return Promise.resolve(300) 的时候返回值如下

start
Promise {<fulfilled>: 300}
data1 100
data 300 // 这个应该 优先
data2 200 // 这个应该 落后 实际不对
data3 300

实际错误信息如上面的图一

关注 3 回答 2

xianshenglu 提出了问题 · 3月5日

Typescript infer 和 never 一起用,结果不同

极简的 demo 如下:

Question1: 为什么 type g2 而不是 1?

// 1
type f = [never] extends [infer S1, ...infer S2]
  ? ([S1] extends [never] ? 1 : 2)
  : 3
// why 2
type g = [never] extends [infer S1, ...infer S2]
  ? ([never] extends [S1] ? 1 : 2)
  : 3

按我理解,type fg 相等,因为 S1never.

Question2: 为什么 h2 不是 1?

// 1
type i = [never] extends [infer S1]
  ? ([never] extends [S1] ? 1 : 2)
  : 3
// why 2
type h = [never] extends [infer S1, ...infer S2]
  ? ([never] extends [S1] ? 1 : 2)
  : 3

按我理解, type ih 相等,因为 S2 没用.

Question3: 为什么 type knever?

// 1
type j = [never] extends [infer S1, ...infer S2]
  ? (never extends S1 ? 1 : 2)
  : 3
// why never ?
type k = [never] extends [infer S1, ...infer S2]
  ? (S1 extends never ? 1 : 2)
  : 3

我以为 k 应该是 123 其中一个.

关注 2 回答 1

xianshenglu 赞了回答 · 3月5日

typescript类型问题

参考一下

const a = [1, '2', {}, {a: 1}, null] as const;

type Result = (typeof a) extends readonly (infer T)[]? NonNullable<T>:never

// 结果是: 1 | "2" | {} | {readonly a: 1;}

新手上路,回答的第一个问题,给个赞吧

关注 4 回答 3

xianshenglu 赞了问题 · 2月9日

typescript, 是否可以定义一个name为string, 其他属性为number的对象?

typescript, 是否可以定义一个name为string, 其他属性为number的对象?

interface A {
    name: string,
    [key: string]: number
}

想当然了, 这是官方文档中提到的错误:

image.png

请问有什么方法可以做到吗?

关注 4 回答 1

xianshenglu 关注了问题 · 2月9日

typescript, 是否可以定义一个name为string, 其他属性为number的对象?

typescript, 是否可以定义一个name为string, 其他属性为number的对象?

interface A {
    name: string,
    [key: string]: number
}

想当然了, 这是官方文档中提到的错误:

image.png

请问有什么方法可以做到吗?

关注 4 回答 1

xianshenglu 赞了回答 · 1月29日

如何定义纯数字的字符串类型在TypeScript

const numberString: `${number}` = '112312'
TS4.1新增功能

关注 3 回答 1

xianshenglu 回答了问题 · 1月29日

解决vue中ts写的代码必须加分号吗?

Step1:
Install eslint-config-prettier:

npm install --save-dev eslint-config-prettier  prettier

Step2:
add eslint-config-prettier to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

Step3:
add .prettierrc.js with

module.exports = {
  semi: false,
};

关注 2 回答 2

xianshenglu 关注了问题 · 1月23日

vue项目中如何强制事件处理器的规则命名?

vue项目中如何限制事件处理器的命名?

最近在使用 vue3,感觉代码组织起来很麻烦,希望通过强制命名规则来让代码更加可读.
比如希望事件处理器都以on前缀开头. onClick 就知道时一个点击事件处理函数.

请问如何通过 eslint| prettier 等工具强制这种命名.

关注 2 回答 0

认证与成就

  • 获得 484 次点赞
  • 获得 29 枚徽章 获得 1 枚金徽章, 获得 10 枚银徽章, 获得 18 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-05-14
个人主页被 4.9k 人浏览