js异步代码同步写法

最新推荐文章于 2024-05-03 11:47:20 发布

Xyt1737

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量1.3k

点赞数

文章标签： javascript 同步异步 es6/es7

本文链接：https://blog.csdn.net/Xyt1737/article/details/120556368

版权

1. 回调函数

它是ES5提供的异步编程解决方案

不过这种方法有诸多不便之处，它虽然由我们定义但是执行却依赖于第三方，且逻辑复杂就需要多层回调，不方便使用

//异步
setTimeout(() => {
    console.log('setTimeout')
}, 0)

2. Promise

它是ES6提供的一种异步编程解决方案，Promise是一个容器，保存着将来才会执行的代码；

从语法角度来说Promise是一个对象，可以用来获取异步操作的消息。异步操作，同步解决，避免了层层嵌套的回调函数。

实例化

Promise构造函数接收一个函数作为参数，也就是回调函数；

该函数的两个参数分别是resolve和reject。

resolve作为成功的回调函数，reject作为失败的回调函数。

Promise对象代表一个异步操作有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。最后返回resolved(已定型)结果。

实例方法

   定义在Promise.prototype中的方法，通过Promise实例可以直接调用

   then() 状态由pending变为fulfilled的时候也就是异步操作成功之后执行该回调函数
   参数：回调函数，回调函数的参数为resolve函数传递过来的值
       返回值：返回一个新的Promise实例对象，因此可以使用链式调用

catch() 由pending变为rejected的时候执行该回调函数也就是异步失败之后执行该回调函数
   参数：回调函数，回调函数的参数为reject函数传递过来的值
       返回值：返回一个新的Promise实例对象，因此可以使用链式调用

finally()无论异步操作执行成功失败与否，都会执行该回调
   参数：回调函数
       返回值：返回一个新的Promise实例对象

const promise = new Promise(function (resolve, reject) {
    if (1 > 0) {
        const response = {
            status: 200,
            message: '操作成功',
            data: null,
            timestamp: new Date().getTime()
        }
        resolve(response)// promise内部状态由padding => fulfilled
    } else {
        const response = {
            status: 500,
            message: '后台接口异常',
            data: null,
            timestamp: new Date().getTime()
        }
        reject(response)// promise内部状态由padding => rejected
    }
})
// promise成功之后，调用resolve()，对应就是.then内部的回调
// promise成功之后，调用reject()，对应就是.catch内部的回调
// promise实例直接调用.then.catch 这种用法是链式调用
promise.then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
})

3. Generator

它是ES6提供的一种异步编程解决方案，语法不同于普通函数；简单的把Generator 理解为一个状态机，封装了多个内部状态。执行Generator 函数会返回一个迭代器对象，可以通过调用迭代器next依次遍历Generator函数内部的每一个状态。

创建Generator函数每个状态之间都是独立的的

//声明一个generator函数
function* myGenFun() {
    console.log('状态一');
    // 每一个yield之间状态是独立的
    let result = yield 'hello'

    console.log('状态二');
    console.log(result);
    yield 'world'

    console.log('状态三');
    return 'ending'
    //因为return会阻止后面的代码运行，所以 Generator提供了yield
    //yiled也是返回值，但是执行一次状态停在了第一个yield ，依次执行next方法，执行下一个yield状态。代码分段执行，见到yield分一段
    //上一个yield之后是下个状态的开始, 下一个状态的结束在下一个yield。yield后面的是返回值。最后一个yield可以return返回
}
// generator函数的执行结果，是一个迭代器对象
let result = myGenFun()
console.log(result);
console.log(result.next());
console.log(result.next('你好'));
console.log(result.next());

模拟发起异步请求拿到第一个状态的返回结果在执行第二个状态，状态之间数据传递通过next

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.js"></script>
  <script>
    const baseURL = 'http://47.101.202.33:8888'

    function getAjax() {
      return $.ajax({
        url: baseURL + '/index/category/findAll',
        method: 'get',
        success(res) {
          iterator.next(res)
        }
      })
    }

    // 第一个状态的出口数据，作为下一个状态的入口数据
    // 这个数据是第二次调用.next()传递的实参
    function* myGenFun() {
      let result = yield getAjax()
      console.log('处理数据', result);
      yield '结束'
    }
    let iterator = myGenFun()
    iterator.next()
  </script>
</head>

<body>

</body>

</html>

4. async

它是一个函数，是一个ES7的异步编程解决方案，内部封装了generator函数，是一个语法糖，内部自带执行器，与await配合使用；异步编程，同步处理。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
    <script>
        const baseURL = 'http://47.101.202.33:8888'
        async function findAllCategory() {
            let res = await $.ajax({
                url: baseURL + '/index/category/findAll',
                method: 'get'
            })
            console.log(res);

            // let res = await axios.get({
            //   url: baseURL + '/index/category/findAll',
            //   method: 'get'
            // })
            // return res
        }
        findAllCategory().then((res) => { })
    </script>
</head>

<body>

</body>

</html>

Xyt1737

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js异步代码同步写法

1.回调函数是ES5提供的异步编程解决方案不过这种方法有诸多不利之处，它虽然由我们定义但是执行却依赖于第三方，且逻辑复杂就需要多层回调，不方便使用//异步setTimeout(() => { console.log('setTimeout')}, 0)2.Promise是ES6提供的一种异步编程解决方案，Promise是一个容器，保存着将来才会执行的代码；从语法角度来说Promise是一个对象，可以用来获取异步操作的消息。异步操作，同步解决，避免了层层嵌套的回调
复制链接

扫一扫