async 和 await

async 和 await 代码结合,可以让异步代码像同步代码一样。

async 函数

  1. async函数的返回值为 promise 对象
  2. promise 对象的结果由 async 函数执行的返回值决定

1.返回一个字符串

// async 函数
    async function fn(){
        // 返回一个字符串
        return '青岛'
    }

    const result = fn()
    console.log(result)

swift 在普通函数里返回async函数的值_html


2.返回的结果不是一个 Promise 类型的对象, 那就是成功的 Promise

// async 函数
    async function fn(){
        return
    }

    const result = fn()
    console.log(result)

swift 在普通函数里返回async函数的值_javascript_02


3.抛出错误

// async 函数
    async function fn(){
        // 抛出错误, 返回的结果是一个失败的 Promise
        throw new Error('出错啦!')
    }

    const result = fn()
    console.log(result)

swift 在普通函数里返回async函数的值_node.js_03


4.返回的结果是 promise 对象

// async 函数
    async function fn(){
        // 返回的结果是一个 Promise 对象
        return new Promise((resolve, reject)=>{
            resolve('成功的数据')
            reject("失败的数据")
        })
    }

    const result = fn()
    console.log(result)

swift 在普通函数里返回async函数的值_html_04


5.调用 then 方法

// async 函数
    async function fn(){
        // 返回的结果是一个 Promise 对象
        return new Promise((resolve, reject)=>{
            /*resolve('成功的数据')*/
            reject("失败的数据")
        })
    }

    const result = fn()
       
    // 调用 then 方法
    result.then(value => {
        console.log(value) // /*成功的数据*/
    }, reason => {
        console.warn(reason) // 失败的数据
    })

await 函数

  1. await 必须写在 async 函数中
  2. await 右侧的表达式一般为 promise 对象
  3. await 返回的是 promise 成功的值
  4. await 的 promise 失败了,就会抛出异常,需要通过 try…catch 捕获处理

返回成功

// 创建 promise 对象
    const p = new Promise((resolve, reject)=>{
        resolve("成功的值!")
    })

    // await 要放在 async 函数中
    async function main(){
        let result = await p
        console.log(result) // 成功的值!
    }
    // 调用函数
    main()

返回失败

// 创建 promise 对象
    const p = new Promise((resolve, reject)=>{
        reject('失败了!')
    })

    // await 要放在 async 函数中
    async function main(){
        try {
            let result = await p
            console.log(result)
        }catch(e){
            console.log(e) // 失败了!
        }
    }
    // 调用函数
    main()

async 和 await 结合

读取文件

  1. 创建 千字文.md
天地玄黄,宇宙洪荒。
日月盈昃,辰宿列张。
寒来暑往,秋收冬藏。
闰余成岁,律吕调阳。
  1. 创建 读取文件.js
// 1.引入 fs 模块
	const fs = require("fs")

	// 读取 千字文
	function readText(){
   		return new Promise((resolve, reject) => {
        	fs.readFile("./千字文.md",(err,data) => {
            	// 如果失败
            	if(err) reject(err)
            	// 如果成功
            	resolve(data)
        	})
    	})
	}

	// 声明一个 async 函数
	async function main(){
   		// 获取千字文内容
    	let text = await readText()

    	console.log(text.toString())
	}

	main()
  1. 在终端输入命令 node 读取文件.js
  2. swift 在普通函数里返回async函数的值_node.js_05


async 与 await 封装 AJAX 请求

使用 then 方法测试

// 发送 AJAX 请求, 返回的结果是 Promise 对象
    function sendAJAX(url){

        return new Promise((resolve, reject) => {

            // 1.创建对象
            const x = new XMLHttpRequest()

            // 2.初始化
            x.open('GET',url)

            // 3.发送
            x.send()

            // 4.事件绑定
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status < 300){
                        // 成功
                        resolve(x.response)
                    }else{
                        // 失败
                        reject(x.status)
                    }
                }     
            }
        })
    }

        // promise then 方法的测试
        sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
            console.log(value)
        },reason=>{})

swift 在普通函数里返回async函数的值_node.js_06


swift 在普通函数里返回async函数的值_javascript_07


async 与 await 测试

// 发送 AJAX 请求, 返回的结果是 Promise 对象
    function sendAJAX(url){

        return new Promise((resolve, reject) => {

            // 1.创建对象
            const x = new XMLHttpRequest()

            // 2.初始化
            x.open('GET',url)

            // 3.发送
            x.send()

            // 4.事件绑定
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status < 300){
                        // 成功
                        resolve(x.response)
                    }else{
                        // 失败
                        reject(x.status)
                    }
                }     
            }
        })
    }

    // async 与 await 测试
    async function main(){
        // 发送 AJAX 请求
        let result = await sendAJAX("https://api.apiopen.top/getJoke")
        console.log(result)
    }

对象方法的扩展

  1. Object.values() 方法返回一个给定对象的所有可枚举属性值的数组
  2. Object.entries() 方法返回一个给定对象自身可遍历属性 [key, value] 的数组
  3. Object.getOwnPropertyDescriptors() 方法返回指定对象所有自身属性的描述对象
// 声明对象
    const school = {
        name:"计算机语言",
        cities: ['北京','上海','深圳'],
        xueke: ['前端','Java','大数据']
   }

    // 获取所有对象的键
    console.log(Object.keys(school))
    // 获取所有对象的值
    console.log(Object.values(school))
    // entries
    console.log(Object.entries(school))
    // 创建Map (entries得到的值为数组,便于创建Map)
    const m = new Map(Object.entries(school))
    console.log(m)

    console.log(Object.getOwnPropertyDescriptors(school))

swift 在普通函数里返回async函数的值_数据_08


不积跬步无以至千里 不积小流无以成江海