美文网首页
异步问题

异步问题

作者: 肥羊猪 | 来源:发表于2021-02-22 17:16 被阅读0次

什么是回调地狱(函数作为参数层层嵌套)
回调函数(一个函数作为参数需要依赖另一个函数执行调用)
如何解决回调地狱

保持你的代码简短(给函数取有意义的名字,见名知意,而非匿名函数,写成一大坨)
模块化(函数封装,打包,每个功能独立,可以单独的定义一个js文件Vue,react中通过import导入就是一种体现)
处理每一个错误
创建模块时的一些经验法则
promise/Generators生成器/ES6等

promise的作用:ajax是异步请求,多层嵌套会造成回调地狱promise模拟同步,将异步回调类似于同步来处理业务逻辑
Promises:编写异步代码的一种方式,它仍然以自顶向下的方式执行,并且由于鼓励使用try / catch样式错误处理而处理更多类型的错误
Generators:生成器让你“暂停”单个函数,而不会暂停整个程序的状态,但代码要稍微复杂一些,以使代码看起来像自上而下地执行
Async functions:异步函数是一个建议的ES7功能,它将以更高级别的语法进一步包装生成器和继承

Async/Await语法

async/await 的优势:可以很好地处理 then 链使用async函数可以让代码简洁很多,不需要像Promise一样需要些then,不需要写匿名函数处理Promiseresolve值,也不需要定义多余data变量,还避免了嵌套代码
Async/Awaittry/catch可以同时处理同步和异步错误
async/await是写异步代码的新方式,以前的方法有回调函数和Promise
async/await是基于Promise实现的,它不能用于普通的回调函数
async/awaitPromise一样,是非阻塞的。
async/await使得异步代码看起来像同步代码

const makeRequest = () => {
        try {
            getJSON().then(result => {
                // JSON.parse可能会出错
                const data = JSON.parse(result)
                console.log(data)
            })
            // 取消注释,处理异步代码的错误
            // .catch((err) => {
            //   console.log(err)
            // })
        } catch (err) {
            console.log(err)
        }
    }
//使用aync/await的话,catch能处理JSON.parse错误
const makeRequest = async () => {
        try {
            // this parse may fail
            const data = JSON.parse(await getJSON())
            console.log(data)
        } catch (err) {
            console.log(err)
        }
    }

条件语句也和错误捕获是一样的,在Async中也可以像平时一般使用条件语句

const makeRequest = async () => {
        const data = await getJSON()
        if (data.needsAnotherRequest) {
            const moreData = await makeAnotherRequest(data);
            console.log(moreData)
            return moreData
        } else {
            console.log(data)
            return data
        }
    }

const makeRequest = () => {
        return getJSON().then(data => {
            if (data.needsAnotherRequest) {
                return makeAnotherRequest(data).then(moreData => {
                    console.log(moreData)
                    return moreData
                })
            } else {
                console.log(data)
                return data
            }
        })
    }
const makeRequest = () => {
        return promise1().then(value1 => {
            return Promise.all([value1, promise2(value1)])
        }).then(([value1, value2]) => {
            return promise3(value1, value2)
        })
    }

 const makeRequest = async () => {
        const value1 = await promise1()
        const value2 = await promise2(value1)
        return promise3(value1, value2)
    }

async/await能够使得代码调试简单
调试Promise不能在返回表达式的箭头函数设置断点.如果在.then代码块中设置断点,使用Step Over快捷键,调试器不会跳到下一个.then,它只会跳过异步代码。

await命令后面的 Promise对象,运行结果可能是rejected,所以最好把 await 命令放在 try...catch代码块中。

async function myFunction() {
try {
  await somethingThatReturnsAPromise();
} catch (err) {
  console.log(err);
}
}

// 另一种写法
async function myFunction() {
await somethingThatReturnsAPromise().catch(function (err){
  console.log(err);
});
}

相关文章

  • 异步问题

    什么是异步 两个请求同时开始,但是二者之间有赋值比较之类的关系时,称为异步

  • * 异步问题

    useEffect(()=>{console.log('effect: ' + requesting);},[re...

  • 异步问题

    什么是回调地狱(函数作为参数层层嵌套)回调函数(一个函数作为参数需要依赖另一个函数执行调用)如何解决回调地狱 pr...

  • JavaScript之异步概述

    1,异步(什么是异步,异步出现的原因,异步解决的问题,如何实现异步,什么时候需要异步模式。) JavaScript...

  • ES6 同步和异步、Promise

    一.同步与异步 1. Promise作用:解决异步回调的问题 二.Promise对象 目的:创建异步对象,当异步对...

  • 小程序里使用async和await变异步为同步,解决回调地狱问题

    最近好多同学,学习完石头哥的云开发基础以后,自己实际项目中,总会遇到各种各样的异步问题。 一,异步问题 所谓异步:...

  • 异步问题处理

    1.通过立即执行函数解决异步问题

  • js 异步问题

    异步的概念 js的异步的概念的起因为js是单线程语言,一次只能同时做一件事。js和dom渲染公用同一个线程,因为j...

  • 04-Node 异步编程

    Node 异步编程同步方法和异步方法异步 API 的执行顺序异步编程回调地狱问题Promise 改造回调地狱代码a...

  • 3.2KOA async/await 语法

    async/await 语法 作用 解决异步嵌套问题,传说中的终极解决方案 异步问题 async/await 实现...

网友评论

      本文标题:异步问题

      本文链接:https://www.haomeiwen.com/subject/ovdkfltx.html