Promise对象与async函数

最新推荐文章于 2023-01-09 09:40:22 发布

richest_qi

最新推荐文章于 2023-01-09 09:40:22 发布

阅读量146

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/108449134

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

文章目录

环境搭建

npm init -y
npm install --save express

服务器端

//server.js
const express = require("express");
const server = express();
server.use(express.static(__dirname));
server.get("/data",function(req,res){
    const user = {
        name:"左一",
        address:"上海 "
    }
    res.json(user);
});
server.get("/name",function(req,res){
    const name = "左一";
    res.send(name);
})
server.listen("3030",function(){
    console.log("listening on *:3030");
})

浏览器端

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>

//index.js
function getDataFromServer(){
    return fetch("/data").then(function(response){
        return response.json();
    }).then(function(user){
        console.log(user);
        return user;
    })
}
function getName(){
    return fetch("/name").then(function(response){
        return response.text();
    }).then(function(name){
        console.log(name);
        return name;
    })
}

回调函数作参数

//index.js
function getDataFromServer(callback){
    fetch("/data").then(function(response){
        return response.json();
    }).then(function(user){
        callback(user);
    })
}
function preprocessBeforeRendering(user,callback){
    const str = `${user.name}他现在在${user.address}`;
    callback(str);
}
function render(htmlString){
    document.body.innerHTML = htmlString;
}

getDataFromServer(function(user){
    preprocessBeforeRendering(user,function(htmlString){
        render(htmlString);
    })
})

Promise

new Promise().then()

//index.js

// function getDataFromServer(){
//     return new Promise((resolve,reject) => {
//         const XHR = new XMLHttpRequest();
//         XHR.open("get","/data/1");
//         XHR.onreadystatechange = function(){
//             if(XHR.status===200 && XHR.readyState===4){
//                 resolve(JSON.parse(XHR.response));
//             }else{
//                 reject(XHR.statusText);
//             }
//         }
//         XHR.send();
//     })
// }

function getDataFromServer(){
    return fetch("/data").then(function(response){
        return response.json();
    }).then(function(user){
        return user;
    })
}
function preprocessBeforeRendering(user){
    return `${user.name}他现在在${user.address}`;
}
function render(htmlString){
    document.body.innerHTML = htmlString;
}

getDataFromServer()
.then(function(user){
    return preprocessBeforeRendering(user);
}).then(function(htmlString){
    render(htmlString);
})

fetch返回一个Promise对象
then(onFulflled,onRejected)
接受两个参数，返回一个Promise对象
- onFulfilled
  异步操作成功时调用的回调函数
  回调函数的参数是异步操作的结果
- onRejected
  异步操作失败时调用的回调函数
  回调函数的参数是异步操作的结果

Promise.resolve().then()

//index.js
function getDataFromServer(){
    return fetch("/data").then(function(response){
        return response.json();
    }).then(function(user){
        return user;
    })
}
function preprocessBeforeRendering(user){
    return `${user.name}他现在在${user.address}`;
}
function render(htmlString){
    document.body.innerHTML = htmlString;
}
Promise.resolve()
.then(getDataFromServer)
.then(preprocessBeforeRendering)
.then(render);

// [getDataFromServer,preprocessBeforeRendering,render].reduce((p,fn)=>p.then(fn),Promise.resolve());

// const applyAsync = (p,fn) => p.then(fn);
// const composeAsync = (...funcs) => funcs.reduce(applyAsync,Promise.resolve());
// composeAsync(getDataFromServer,preprocessBeforeRendering,render);

Promise.resolve()，手动创建一个已经resolve的Promise对象。

异步之加载图像

function loadedImgAsync(url,elm){
    return new Promise((resolve,reject) => {
        var img = new Image();
        img.onload = function(){
            resolve(`loaded image at ${url}`)
        }
        img.onerror = function(){
            reject(new Error(`could not loaded image at ${url}`));
        }
        img.src = url;
        elm.appendChild(img);
    })
}

// loadedImgAsync("./imgs/d.png",document.body)
// .then(
//     tip => console.log(tip),
//     err => console.log(err)
// );

loadedImgAsync("./imgs/d.png",document.body)
.then(tip => console.log(tip))
.catch(tip => console.log(tip));

async…await

//index.js
function getDataFromServer(){
    return fetch("/data").then(function(response){
        return response.json();
    }).then(function(user){
        return user;
    })
}
function preprocessBeforeRendering(user){
    return `${user.name}他现在在${user.address}`;
}
function render(htmlString){
    document.body.innerHTML = htmlString;
}
async function init(){
    const user = await getDataFromServer();
    const htmlString = preprocessBeforeRendering(user);
    render(htmlString);
}
init();

async function
返回一个Promise对象
await
该关键词只在async function内有效

async...await允许我们以类似同步方式书写异步代码。
在这里插入图片描述

异步之定时器

const timeout = ms => new Promise(resolve => setTimeout(resolve,ms));
const asyncPrint = async (value,ms) => {
    await timeout(ms);
    console.log(value);
}
asyncPrint("hello world",1000*2);

刷新页面2秒后，控制台打印出"hello world"。

异步之读取文件

const fs = require("fs");
const readFile = (url) => {
    return new Promise((resolve,reject) => {
        fs.readFile(url,"utf8",(err,data) => {
            if(err) reject(err);
            resolve(data);
        })
    })
}
const asyncReadFile = async (url) => {
    const fileContent = await readFile(url);
    console.log(fileContent);
}

asyncReadFile("./index.html");

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Promise对象与async函数

文章目录环境搭建回调函数作参数Promisenew Promise().then()Promise.resolve().then()async...await环境搭建npm init -ynpm install --save express//server.jsconst express = require("express");const server = express();server.use(express.static(__dirname));server.get("/data"
复制链接

扫一扫