ES6学习async和await笔记

一、 async&await

• 1、 async（异步）和await（async wait）是用来处理异步的。即你需要异步如同同步一样执行（实现单线程），需要异步返回结果之后，再往下依据结果继续执行（但是前提是await后面跟的是promise对象—且Promise对象中有异步操作例如定时器返回的值用resolve返回）
• 2、await只能放在async函数内部使用
• 3、await 用于一个异步操作之前，表示要“等待”这个异步操作的返回值。

1.1、 async/await来发送异步请求，从服务端获取数据

• 使用语法：函数前面加关键字async

    <script type="text/javascript">
        function timeout(){
        return "hello world";
        }
        console.log(timeout());
        </script>

//async
async function timeout(){
        return "hello world";
        }
        console.log(timeout());//
//函数前面的async一词意味着一个简单的事情：这个函数总是返回一个promise，
//如果代码中有return <非promise>语句，JavaScript会自动把返回的这个value值包装成promise的resolved值;调用就像普通函数一样调用,但是后面可以跟then()了

• 结果：控制台打印hello world
  

但是async的用法，他作为一个关键字
async只有一个作用，他的调用会返回一个promise对象函数

返回值： 返回promise对象

那么要想获取到async 函数的执行结果，就要调用promise的then 或catch 来给它注册回调函数

await后面 await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。

• 如果后面是正常表达式的话就立即执行不会进行等待

function sleep(second) {
    
        setTimeout(() => {
            console.log(' enough sleep~');
        }, second);
   
}
async function awaitDemo() {
    let result = await sleep(2000);
    console.log("123");
}
awaitDemo();//立即输出123 两秒后输出' enough sleep~'

• 如果后面是promise对象会造成异步函数停止执行并且等待promise解决后才会执行后面的

console.log(1);
function sleep(second)
{
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            console.log(21234);
            resolve(2);//返回的数据----异步后返回的数据
        },second);
    })
}
async function awaitDemo(){
    let result=await sleep(2000);
    console.log(result);    
    console.log(124);
}
    awaitDemo();
        </script>

二、fetch和async和await进行封装交互

async function myFunc(){
//return "Hello";
const promise=new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("Hello")
}，2000)})
//错误信息
const error=false;
if(!error){
//等待resolve执行完毕之后，在执行
const res=await promise;
return res;
}else{
await Promise.reject(new Error("error:报错了!"));
}
}
console.log(myFunc());
myFunc()
.then(data=>console.log(data))
.catch(srr=>console.log(err));

• 函数加一个async，将一个函数作为一个promise返会去
  

async返回promise构造函数
await等待你的resolve执行完毕后执行才会执行

//请求数据
async function getUsers(){
const response=await fetch("http://jsonplaceholder.typicode.com/user");
//加了await后他会等异步执行完毕后在执行后面的，如果不加下一行代码就会出错
const data=await response.json();
return data;
}getUsers().then(users=>console.log(users));

async封装fetch（fetch是一种HTTP数据请求的方式）用html

class EasyHttp{
//get
 async get(url){
const response=await fetch(url);
const resData=await response.json();
return resData;
}
}
const http=new EasyHttp;
http.get("http://jsonplaceholder.typicode.com/users")
.then((data)=>{
})console.log(data)
.catch(srr=>console.log(err));