同步,异步的区别 && 异步操作同步化

同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指(async):发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。

目录

一。async,await函数

二。回调函数嵌套

三。Promise  的  ...then方式

四。Generator(生成器)函数

一。async,await函数

  1. .async/await更加语义化,async 是“异步”的简写,async function 申明一个 function  是异步的;await,可以认为是async wait的简写, 用于等待一个异步方法执行完成;
  2. async/await是一个用同步思维解决异步问题的方案(需要等待结果出来之后,代码才会继续往下执行,另外async声明的函数返回的是一个Promise)

例如:

同步,异步的区别 && 异步操作同步化_第1张图片

案例:通过异步把上面这个模块的数据传递给下面这个模块,下面这个使用async await来获取数据

const fs = require('fs')
exports.getFileMime = (extname)=>{
    return new Promise((resolve, reject)=>{
        fs.readFile('./处理文件后缀名/mime.json',(err,data)=>{
            if(err){
                console.log(err);
                reject(err);    // 失败
            }
            let mimeobj=JSON.parse(data.toString());
            // 因为那边传来的是.html,..., 如果在使用mimeobj.extname返回后缀名会出现报错,所以要用数组下标方式
            //把需要的数据通过 resolve(....)返回出去
            resolve(mimeobj[extname]);
        })
    })
}
// 简写
const http = require('http');
const fs = require('fs')
//引入自定义模块 处理文件后缀名
const common = require('./处理文件后缀名/index.js')
const path = require('path')

http.createServer((request, response)=>{
    let pathname = request.url;
    //获取文件后缀名
    const fullname = path.extname(pathname)
    if(pathname != '/favicon.ico'){
        fs.readFile('.'+pathname,async (err, data)=>{
            if(err){
                console.log('404');
                return;
            }
            let mime = await common.getFileMime(fullname)
            response.writeHead(200, {'Content-Type': `${mime};charset=utf-8`});
            response.end(data)
        });
    }
}).listen(8081);
console.log("Server runing at http://127.0.0.1:8081/aaa.zip");

二。回调函数嵌套

findAll().then((res)=>{        
     findById()
})

三。Promise  的  ...then方式

Promise一旦新建就立刻执行, 此时的状态是Pending(进行中),它接受两个参数分别是resolve和reject.它们是两个函数.
resolve() 函数的作用:将Promise对象的状态从'未完成'变为'成功'(由Pending变为Resolved), 在异步操作成功时,将操作结果作为参数传递出去;
reject() 函数的作用:将Promise对象的状态从'未完成'变为失败(由Pending变为Rejected),在异步操作失败时调用,并将异步操作的错误作为参数传递出去.

四。Generator(生成器)函数

是ES6提供的一种异步编程解决方案 , 语法上可以把Generator函数理解为一个状态机,封装了多个内部状态

  function dataone(){
        Schema2.find(function(err,data){
            if(err) throw err;
            iterator.next(data)
        }).limit(3)
    }
    function datatwo(){
        Schema2.find(function(err,data){
            if(err) throw err;
            iterator.next(data)
        }).skip(3).limit(3)
    }

    function * gen(){
        // console.log('我是第一');
        let a = yield dataone();   // yield 代码分隔符 
        // console.log('a',a);
        let b = yield datatwo();
        // console.log('b',a,b);   
        res.send({
            status: 0,
            msg: 'GET请求成功',
            code: 200,
            data: [
                {
                    title:'精品女装',
                    data:a
                },
                {
                    title:'精品男装',
                    data:b
                }
            ]
        })
    }
    let iterator = gen()   
    iterator.next()   //调用生成器,注意每次调用 next()可以依次获取每个yield 的值
})

你可能感兴趣的:(前端,vue.js)