TypeScript 如何自己实现一个Promise

Posted 2023-05-21 Meow~

import readFile from \'fs\';

type Resolve<T> = (result: T) => void;
type Reject = (error: unknown) => void;

type Executor<T> = (
  resolve: Resolve<T>,
  reject: Reject
) => void;

class MyPromise<T> 
  private _thenCallBack: Resolve<T> = () => ;
  private _errorCallBack: Reject = () => ;
  constructor(executor: Executor<T>) 
    executor((data: T) => 
      this._thenCallBack(data);
    ,(error) => 
      this._errorCallBack(error);
    );
    return this;
  
  then<U>(thenCallBack: (result: T) => void): MyPromise<U> 
    this._thenCallBack = thenCallBack;
    return this as MyPromise<any>;
  
  catch<U>(errorCallBack: (error: unknown) => void): MyPromise<U> 
    this._errorCallBack = errorCallBack;
    return this as MyPromise<any>;
  


new MyPromise((resolve, reject) => 
  readFile(\'./src/no-file.txt\', (error, data) => 
    if (error) 
      reject(error);
     else 
      resolve(data);
    
  );
).then((data) => 
  console.log(data);
).catch((error) => 
  console.log(error);
);

 

如何使用 vuex 和 typescript 将 axios 调用移动到自己的方法中

【中文标题】如何使用 vuex 和 typescript 将 axios 调用移动到自己的方法中

【英文标题】：How to move an axios call into its own method using vuex and typescript

【发布时间】：2022-01-06 17:50:29

【问题描述】：

我在 vuex 操作中有一个方法，它调用 api 并更新用户信息。我正在尝试做的是将 axios 调用移动到它自己的方法中并且没有任何运气。

这是我的代码

async updateProfile( commit, dispatch : any, user: User):Promise<User> 
    console.log(user)
    console.log("currentUser")

    const response = await axios.request(
        method: "PUT",
        url: `/users/me/profile`,
        data: user
    );
    //  dispatch('updateUserProfile', user);
   
    console.log(response)
    console.log("response")
    return user;
    // return response;
,
async updateUserProfile(user: any): Promise<User> 
    return await axios.request(
        method: "PUT",
        url: `/users/me/profile`,
        data: user
      );
,

注释掉的行dispatch正在尝试调用axios方法并将用户作为参数传递。当我尝试该行而不是 axios.request 时，我收到 400 错误。当我将用户：任何更改为用户：用户时，我得到一个属性“操作”的类型不兼容。错误

【问题讨论】：

你检查过你的 API 看看有什么问题吗？ 400 Bad Request 通常来自验证错误（例如最小/最大长度、非空等）和类似的格式错误的请求。

为什么这些 Vuex 操作中的任何一个都是？他们不提交任何突变甚至读取状态????

【参考方案1】：

您是否将 updateProfile 和 updateUserProfile 都定义为 vuex 操作？如果是这样，后者看起来根本不像一个动作。所有动作的第一个参数是 context。

只需让它成为一个独立的功能，与您的商店完全分开

// could even be in another file / module entirely
const updateUserProfile = (user: User) =>
  axios.put<User>("/users/me/profile", user)

从一个动作中，你可以直接调用它

// S = state type, R = root state type
async yourAction( commit : ActionContext<S, R>, user: User): Promise<User> 
  const response = await updateUserProfile(user)

  // here's where you would commit something

  return user // or whatever

【讨论】：

虽然我认为你说 API 调用不应该是存储操作是完全正确的，但我认为你也没有说明简单的错误是什么，即错误的签名行动。

@v-moe 我特别提到了“所有动作的第一个参数是上下文”

很公平。 “上下文”毕竟应该是 JS 开发者熟知的概念。请忘记我的评论

【参考方案2】：

您的网址不同。一个有前导斜线，另一个没有。你的第二个动作应该有 作为第一个参数。应该是async updateUserProfile(, user: any)。这可能解释了为什么您会收到 400。您的请求负载可能是空的，不是吗？

【讨论】：

谢谢，但没有解决问题

请看我的编辑