uni-app 項目記錄

await等候，等待；期待

什麼是async、awaitawait 用於等待異步完成一般async、await都是跟隨Promise一塊兒使用的

async返回的都是一個Promise對象同時async適用於任何類型的函數上。這樣await獲得的就是一個Promise對象

async function testSync() {
     const response = await new Promise(resolve => {
         setTimeout(() => {
             resolve("async await test...");
          }, 1000);
     });
     console.log(response);
}
testSync();//async await test...複製代碼

async function asyncAwaitFn(str) {
    return await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(str)
        }, 1000);
    })
}

const serialFn = async () => { //串行執行

    console.time('serialFn')
    console.log(await asyncAwaitFn('string 1'));
    console.log(await asyncAwaitFn('string 2'));
    console.timeEnd('serialFn')
}

serialFn();複製代碼

async function asyncAwaitFn(str) {
    return await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(str)
        }, 1000);
    })
}
const parallel = async () => { //並行執行
    console.time('parallel')
    const parallelOne = asyncAwaitFn('string 1');
    const parallelTwo = asyncAwaitFn('string 2')

    //直接打印
    console.log(await parallelOne)
    console.log(await parallelTwo)

    console.timeEnd('parallel')


}
parallel()複製代碼

await 操做符用於等待一個Promise 對象。它只能在異步函數 async function 中使用。表達式一個 Promise 對象或者任何要等待的值。返回值返回 Promise 對象的處理結果。若是等待的不是 Promise 對象，則返回該值自己。

await 表達式會暫停當前 async function 的執行，等待 Promise 處理完成。若 Promise 正常處理(fulfilled)，其回調的resolve函數參數做爲 await 表達式的值，繼續執行 async function。

若 Promise 處理異常(rejected)，await 表達式會把 Promise 的異常緣由拋出。

另外，若是 await 操做符後的表達式的值不是一個 Promise，則返回該值自己。

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}
f1();複製代碼

async function f2() {
  var y = await 20;
  console.log(y); // 20
}
f2();複製代碼

async function f3() {
  try {
    var z = await Promise.reject(30);
  } catch (e) {
    console.log(e); // 30
  }
}
f3();複製代碼

setTimeout，Promise，async/await的區別？

async/await

async/ await來發送異步請求，從服務端獲取數據

async的用法它做爲一個關鍵字放到函數前面，用於表示函數是一個異步函數

async function timeout() {
　　return 'hello world';
}複製代碼

async function timeout() {
    return 'hello world'
}
timeout();
console.log('雖然在後面，可是我先執行');複製代碼

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('雖然在後面，可是我先執行');複製代碼

控制檯中的Promise 有一個resolved，這是async 函數內部的實現原理。

返回一個值當調用該函數時，內部會調用Promise.solve() 方法把它轉化成一個promise 對象做爲返回

函數內部拋出錯誤就會調用Promise.reject() 返回一個promise 對象

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 調用Promise.resolve() 返回promise 對象。
console.log(timeout(false)); // 調用Promise.reject() 返回promise 對象。複製代碼

若是函數內部拋出錯誤， promise 對象有一個catch 方法進行捕獲。

timeout(false).catch(err => {
    console.log(err)
})複製代碼

await是等待的意思它後面跟着什麼呢？

注意await 關鍵字只能放到async 函數裏面

更多的是放一個返回promise 對象的表達式

// 2s 以後返回雙倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}複製代碼

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}複製代碼

const express = require('express');
const app = express();// express.static 提供靜態文件，就是html, css, js 文件
app.use(express.static('public'));

app.listen(3000, () => {
    console.log('server start');
})複製代碼

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的簡書！

這是一個有質量，有態度的博客