輸入非同期機能が正しくデータ

Question

背景解決しない：

を私が作成するために作成反応するアプリを使用している部品が反応し、私の最新のプロジェクトは、データを返すために、サーバのバックエンドが必要です。

「API」ファイルからインポートされた関数を使用して、APIによって返されたデータをモックアップするのが好きです。

最近、私は読みやすく、より新しい非同期/待機関数を採用し始めました。

問題：私は私の理解に、デフォルトでは、約束を返した（私はもともと非同期機能としてそれらを作成し、これらのAPI関数をインポートしていると経由して値を解決します私のコンポーネントの私の一

キーワードreturn、キーワードthrowで拒否）。

しかし、コードをデバッグすると、非同期関数が呼び出され、すぐに未定義の "結果"がコンソールに表示されていることがわかります。.then(res=>{console.log(res)});を使用すると、すぐにコールバック関数に入ります解決する約束を待っている。

**これらの関数を呼び出すために使用されるコード：**

// I have removed all the other lines of code and left the important code 
import { getVideoList } from './api'; 
runMe = async() => { 
    let res = await getVideolist(); 
    console.log(res); 
} 
<button onClick={this.runMe}>Click Me</button> 

事は約束して機能の内容をラップし、約束の解決機能を使用する場合、それが正しく動作していることです。ここで

が元のコードである：ここでは

export let getVideoList = async() => { 
    let random = Math.floor(Math.random() * 3000); 
    setTimeout(() => { 
     let res = [ 
      { 
       video_ID: 3, 
       video_url: 'https:google.com/3', 
       video_description: 'A basic video of exercise', 
       tags: ['upper-body', 'biceps', 'triceps'], 
      }, 
      { 
       video_ID: 2, 
       video_url: 'https:google.com/2', 
       video_description: 'A basic video of exercise', 
       tags: ['upper-body', 'biceps', 'triceps'], 
      }, 
      { 
       video_ID: 1, 
       video_url: 'https:google.com/1', 
       video_description: 'A basic video of exercise', 
       tags: ['upper-body', 'biceps', 'triceps'], 
      }, 
     ]; 
     return res; 
    }, random); 
}; 
export let getTags = async() => { 
    let random = Math.floor(Math.random() * 3000); 
    setTimeout(() => { 
     return [ 
      { tag_ID: 1, tagName: 'upper-body' }, 
      { tag_ID: 2, tagName: 'biceps' }, 
      { tag_ID: 3, tagName: 'triceps' }, 
      { tag_ID: 4, tagName: 'shoulders' }, 
     ]; 
    }, random); 
}; 
export let getVideos = async() => { 
    let random = Math.floor(Math.random() * 3000); 
    setTimeout(() => { 
     let res = [ 
      { video_ID: 3, video_url: 'https:google.com/3', video_description: 'A basic video of exercise' }, 
      { video_ID: 2, video_url: 'https:google.com/2', video_description: 'A basic video of exercise' }, 
      { video_ID: 1, video_url: 'https:google.com/1', video_description: 'A basic video of exercise' }, 
     ]; 
     return res; 
    }, random); 
}; 

作品改訂コードです：

export let getVideoList = async() => { 
    return new Promise((res, rej) => { 
     let random = Math.floor(Math.random() * 3000); 
     setTimeout(() => { 
      res([ 
       { 
        video_ID: 3, 
        video_url: 'https:google.com/3', 
        video_description: 'A basic video of exercise', 
        tags: ['upper-body', 'biceps', 'triceps'], 
       }, 
       { 
        video_ID: 2, 
        video_url: 'https:google.com/2', 
        video_description: 'A basic video of exercise', 
        tags: ['upper-body', 'biceps', 'triceps'], 
       }, 
       { 
        video_ID: 1, 
        video_url: 'https:google.com/1', 
        video_description: 'A basic video of exercise', 
        tags: ['upper-body', 'biceps', 'triceps'], 
       }, 
      ]); 
      return res; 
     }, random); 
    }); 
}; 
export let getTags = async() => { 
    return new Promise((res, rej) => { 
     let random = Math.floor(Math.random() * 3000); 
     setTimeout(() => { 
      res([ 
       { tag_ID: 1, tagName: 'upper-body' }, 
       { tag_ID: 2, tagName: 'biceps' }, 
       { tag_ID: 3, tagName: 'triceps' }, 
       { tag_ID: 4, tagName: 'shoulders' }, 
      ]); 
     }, random); 
    }); 
}; 
export let getVideos = async() => { 
    return new Promise((res, rej) => { 
     let random = Math.floor(Math.random() * 3000); 
     setTimeout(() => { 
      res([ 
       { video_ID: 3, video_url: 'https:google.com/3', video_description: 'A basic video of exercise' }, 
       { video_ID: 2, video_url: 'https:google.com/2', video_description: 'A basic video of exercise' }, 
       { video_ID: 1, video_url: 'https:google.com/1', video_description: 'A basic video of exercise' }, 
      ]); 
     }, random); 
    }); 
}; 

私はこれが起こっている理由としてわからないよ、私が探して試してみましたインポートを非同期的に使用するという新しいトピックが出てきました。

これはこのプロジェクトではあまり問題にはなりませんが、今後のプロジェクトではこれを一番下に置きたいと思います。

非同期/で動作するように改訂されたコードが待っています：

const timer = ms => new Promise(res => setTimeout(res, ms)); 
export let getVideoList = async() => { 
    let random = Math.floor(Math.random() * 3000); 
    await timer(random); 
    let res = [ 
     { 
      video_ID: 3, 
      video_url: 'https:google.com/3', 
      video_description: 'A basic video of exercise', 
      tags: ['upper-body', 'biceps', 'triceps'], 
     }, 
     { 
      video_ID: 2, 
      video_url: 'https:google.com/2', 
      video_description: 'A basic video of exercise', 
      tags: ['upper-body', 'biceps', 'triceps'], 
     }, 
     { 
      video_ID: 1, 
      video_url: 'https:google.com/1', 
      video_description: 'A basic video of exercise', 
      tags: ['upper-body', 'biceps', 'triceps'], 
     }, 
    ]; 
    return res; 
}; 
export let getTags = async() => { 
    let random = Math.floor(Math.random() * 3000); 
    await timer(random); 
    return [ 
     { tag_ID: 1, tagName: 'upper-body' }, 
     { tag_ID: 2, tagName: 'biceps' }, 
     { tag_ID: 3, tagName: 'triceps' }, 
     { tag_ID: 4, tagName: 'shoulders' }, 
    ]; 
}; 
export let getVideos = async() => { 
    let random = Math.floor(Math.random() * 3000); 
    await timer(random); 
    let res = [ 
     { video_ID: 3, video_url: 'https:google.com/3', video_description: 'A basic video of exercise' }, 
     { video_ID: 2, video_url: 'https:google.com/2', video_description: 'A basic video of exercise' }, 
     { video_ID: 1, video_url: 'https:google.com/1', video_description: 'A basic video of exercise' }, 
    ]; 
    return res; 
}; 

FIX：

問題は、setTimeoutメソッド内の値を返すようにしようと由来します。

Answer 1

await setTimeout(_=>{...},random) 

setTimeoutとして機能しません。約束を返しません。それをpromisifyことがあります。

const timer = ms => new Promise(res => setTimeout(res,ms)); 

ですから、

async whatever(){ 
    await timer(1000); 
    return { ... }; 
} 

を行うことができます（小ヒント：タイムアウト内部から返すことは何も...しません）