JSの基本的な_async_await_promiseはコールバック地獄を解決します

非同期の使用法

Async は非同期という意味で、関数の前にキーワードとして置かれ、その関数が非同期関数であることを示します。

非同期関数は、関数の実行によって次のコードの実行がブロックされないことを意味し、非同期関数は Promise オブジェクトを返します。

    async function func() {
      return "async"
    };
    func();
    console.log('执行'); //控制台输出 执行

非同期によって後続の購入の実行がブロックされないことがわかります。

    async function func() {
      return "async"
    };
    console.log(func())
    console.log('执行'); //控制台输出 执行

async 関数が Promise オブジェクトを返すことがわかり、then を使用して次のステップに進むことができます。

    async function func() {
      return "async"
    };
    func().then( res => {
      console.log(res)
    })
    console.log('执行'); //控制台输出 执行

さらに一歩進んで、async 関数が次のコードの実行をブロックしないことがわかります。

awaitの使い方

await は待つことを意味し、その後に任意の式を続けることができますが、ここではさらに Promise オブジェクトを返す式を置きます。

await キーワードは非同期関数にのみ配置できることに注意してください。

Promise オブジェクトを返す関数を作成し、1 秒後に "Promise object" 文字列を返し、await を配置する非同期関数を作成して、最後にコンソールを呼び出して以下を出力します。

    function returnPromise() {
      return new Promise((resolve,reject) => {
        setTimeout(()=>{
          resolve('promise对象')
        },1000)
      })
    }
  
    async function awaitFunc() {
      let data = await returnPromise();
      console.log(data)
    }

    awaitFunc();

このようにして、コールバックの必要がなくなり、コールバック領域の問題を非常にうまく解決できます。

コードの実行プロセスを遡って awaitFunc 関数を呼び出すと、await が発生し、コードはここで一時停止し、下方向に実行されなくなります。後続の Promise オブジェクトが実行された後、Promise Resolve の値を取得して返します。戻り値を取得した後は下方向に実行を続けます。コード特有のことですが、await に遭遇した後、コードは実行を一時停止し、returnPromise が実行されるのを待ち、1 秒後に Promise が解決されて値を返します。このとき、await は戻り値を取得し、代入します。コードは次の console.log ステートメントの実行を継続し、最後に「promise object」文字列を出力します。

これは async と await で、次のようにプロジェクトの実践でよく使用されます。

    //ドリルダウンレンダリング

    async down(パス, 名前){

      コード=this.backname(名前); にしましょう。

      let data = await axios.get(`api-website/sys/st-sch-school/schoolByGIS?province=${code}`);

      データ=データ.データ.結果;

      let json = await axios.get(path);

      this.$echarts.registerMap(name, json.data);

      this.myChart.setOption(

        DownheatOption(データ, 名前),

        間違い、

      );

    }、

  async mounted() {
    let map = await axios.get(`http://localhost:8080/static/json/china.json`);
    this.chinajson = map.data;
    
    let one= await axios.get('api-website/sys/st-sch-school/schoolByGIS?batch=3');
    this.heatarr.all=one.data.result;//全部高校数据
  },

    async goodsDetails() {
      let self = this;
      let result = await api.request('goodsDetails', { code: self.code })
      if (result.status == 0) {
        let data = result.data;
        self.name = data.name;
        self.images = JSON.parse(data.images);
      } else {
        self.$message.error('获取商品详情失败！')
      }
    },

同じ

    goodsDetails() {
      let self = this;
      api.request('goodsDetails', { code: self.code }, res => {
        if (res.status == 0) {
          let data = res.data;
          console.log('data', data)
          self.name = data.name;
          self.images = JSON.parse(data.images);
        } else {
          self.$message.error('获取商品详情失败！')
        }
      })
    },

上記の例を通して、async と await の実際の応用をよりよく理解できると思います。