• promise一脸懵逼...


    // 要求:封装一个方法,能根据路径读取文件,并把内容返回
    const fs=require('fs')
    const path=require('path')
    1. 普通读取文件的方式
    1 const fs=require('fs')
    2 const path=require('path')
    3   
    4 /*
    5 fs.readFile(path.join(__dirname,'./files/1.txt'),'utf-8',(err,dataStr)=>{
    6     if(err) throw err
    7     console.log(dataStr)
    8 })
    9 */

    命令行敲 :node .1.封装读取文件的方法.js,结果为1.txt的内容 :111

    2.调用function

    1 function getFileByPath(fpath){
    2     fs.readFile(fpath,'utf-8',(err,dataStr)=>{
    3         if(err)  throw err
    4         console.log(dataStr)  //  打印->111
    5     })
    6 }
    7 // getFileByPath(path.join(__dirname,'./files/1.txt')) // 结果 ->111
    8 // var result=getFileByPath(path.join(__dirname,'./files/1.txt')) 
    9 // console.log(result)  // 结果 ->undefined  

    3.加入回调函数

     1 function getFileByPath(fpath,callback){
     2     fs.readFile(fpath,'utf-8',(err,dataStr)=>{ //异步
     3         if(err)   throw err
     4 
     5         callback(dataStr)
     6     })
     7 }
     8 getFileByPath(path.join(__dirname,'./files/1.txt'),(dataStr)=>{
     9      console.log(dataStr+'-----')
    10    //结果:  111-----
    11 })

     4.对回调函数进行修改

     1 callback中有两个参数,一:失败的结果 二:成功的结果
     2    规定:如果成功后,返回的结果,应该位于callback参数的第二个位置,
     3                              此时第一个参数没有出错,所以第一个放一个null
     4              如果失败了,第一个位置放err对象,第二个位置放undefined
     5 
     6 function getFileByPath(fpath,callback){
     7     fs.readFile(fpath,'utf-8',(err,dataStr)=>{
     8         if(err)  callback(err)
     9 
    10         callback(null,dataStr)
    11     })
    12 }
    13 //读一个不存在的文件,验证err
    14 getFileByPath(path.join(__dirname,'./files/11.txt'),(err,dataStr)=>{
    15     //失败
    16     if(err) return console.log(err.message)
    17     //成功
    18     console.log(dataStr)
    19 })  

     5.提高版

     1 function getFileByPath(fpath,succCb,errCb){
     2     fs.readFile(fpath,'utf-8',(err,dataStr)=>{
     3         if(err)  return errCb(err)
     4 
     5         succCb(dataStr)
     6     })
     7 }
     8 getFileByPath(path.join(__dirname,'./files/1.txt'),function(data){
     9     console.log(data+"成功了")
    10 },function(err){
    11     console.log("失败的结果,使用失败的回调处理"+err.message)
    12 })

     6.需求:先读取文件1,再读取文件2,再读取文件3

     1 function getFileByPath(fpath,succCb,errCb){
     2     fs.readFile(fpath,'utf-8',(err,dataStr)=>{
     3         if(err)  return errCb(err)
     4 
     5         succCb(dataStr)
     6     })
     7 }
     8 
     9 // 需求:先读取文件1,再2再3
    10 getFileByPath(path.join(__dirname,'./files/1.txt'),function(data){
    11     console.log(data)
    12 
    13     getFileByPath(path.join(__dirname,'./files/2.txt'),function(data){
    14         console.log(data)
    15 
    16         getFileByPath(path.join(__dirname,'./files/3.txt'),function(data){
    17             console.log(data)
    18         })
    19     })
    20 })

     1.Primise

     1 // 1.Promise是一个构造函数
     2 // 2,在Promise上,有两个函数:resolve(成功之后的回调函数)和reject(失败之后的回调函数)
     3 // 3.在Promise 构造函数的 Prototype 属性上,有一个 .them()方法,,即只要是Promise构造函数创建的实例,都可以访问到 .then()方法
     4 // 4.如果Promise表示一个异步操作,每次new一个promise实例时,此实例表示一个具体的异步操作
     5 // 5.Promise创建的实例是异步操作,那么这个异步操作的结果,只能有两种状态:
     6 // 5.1状态1:异步执行成功,在内部调用成功的回调函数 - resolve 把结果返回给调用者
     7 // 5.2状态2:异步执行失败,在内部调用失败的回调函数 - reject  把结果返回给调用者
     8 // 5.3由于promise的实例是异步操作,所有内部拿到操作的结果后,无法使用return 把操作的结果返回给调用者,
     9 //    只能使用回调函数的形式,将成功或失败的结果返回给调用者
    10 
    11 // 每当new一个Promise实例的时候,就会立即执行异步操作中的代码,
    12 // 即,new的时候,除了能得到一个promise实例外,还会调用为promise构造函数传递的那个function,执行此function中的异步操作代码
    1 const fs=require('fs')
    2 /*var promise=new Promise(function(){
    3     fs.readFile('./files/2.txt','utf-8',(err,dataStr)=>{
    4         if(err) throw err
    5         console.log(dataStr)
    6     })
    7 })
    8 */
     1 /*function getFileByPath(fpath){
     2     var promise=new Promise(function(){
     3         fs.readFile(fpath,'utf-8',(err,dataStr)=>{
     4             if(err) throw err
     5             console.log(dataStr)
     6         })
     7     }) 
     8 }
     9 getFileByPath('./files/2.txt')
    10 */
     1 function getFileByPath(fpath){
     2     var promise=new Promise(function(resolve,reject){
     3         fs.readFile(fpath,'utf-8',(err,dataStr)=>{
     4             if(err) return reject(err)
     5             resolve(dataStr)
     6         })
     7     }) 
     8     return promise
     9 }
    10 var p=getFileByPath('./files/2.txt')
    11 p.then(function(data){
    12     console.log(data+'------')
    13 },function(err){
    14     console.log(err+'------')
    15 })

     改进:

     1 function getFileByPath(fpath){
     2     return new Promise(function(resolve,reject){
     3         fs.readFile(fpath,'utf-8',(err,dataStr)=>{
     4             if(err) return reject(err)
     5             resolve(dataStr)
     6         })
     7     }) 
     8 }
     9 getFileByPath('./files/2.txt')
    10 .then(function(data){
    11     console.log(data+'------')
    12 },function(err){
    13     console.log(err+'------')
    14 })

    解决回调地狱:在上一个 .then 中,返回一个新的promise实例,可以继续使用下一个.then来处理

     1 const fs=require('fs')
     2 
     3 function getFileByPath(fpath){
     4     return new Promise(function(resolve,reject){
     5         fs.readFile(fpath,'utf-8',(err,dataStr)=>{
     6             if(err) return reject(err)
     7             resolve(dataStr)
     8         })
     9     }) 
    10 }
    11 // 先读取1,后2 再3
    12 // 注意:通过.then指定 回调函数的时候,成功的回调函数,必须传,失败的回调,可以省略不传
    13 getFileByPath('./files/1.txt')
    14 .then(function(data){
    15     console.log(data)
    16 
    17     return getFileByPath('./files/2.txt')
    18 })
    19 .then(function(data){
    20     console.log(data)
    21 
    22     return getFileByPath('./files/3.txt')
    23 })
    24 .then(function(data){
    25     console.log(data)
    26 })

     在.then中指定失败的操作:

     1 // 如果前面的promise执行失败,不想让后续的Promise被终止,可以为每个promise指定失败的操作
     2 getFileByPath('./files/11.txt')
     3 .then(function(data){
     4     console.log(data)
     5 
     6     return getFileByPath('./files/2.txt')
     7 },function(err){
     8     console.log('1失败了,2继续'+err.message)
     9     // 返回新的promise
    10     return getFileByPath('./files/2.txt')
    11 })
    12 .then(function(data){
    13     console.log(data)
    14 
    15     return getFileByPath('./files/3.txt')
    16 })
    17 .then(function(data){
    18     console.log(data)
    19 })
    20 
    21 console.log('为什么会执行我?')
    22 
    23 PS D:webstorm1promise> node .4.使用promise解决回调地狱.js
    24 为什么会执行我?
    25 1失败了,2继续ENOENT: no such file or directory, open 'D:webstorm1promisefiles11.txt'
    26 222
    27 333

     有依赖关系时,异常捕获:

     1 / 有时候,需求:与上面的需求刚好相反,如果后续的promise执行,依赖于前面promise执行的结果,
     2 // 如果前面失败了,则后面的就没有继续执行下去的意义
     3 getFileByPath('./files/1.txt')
     4 .then(function(data){
     5     console.log(data)
     6 
     7     return getFileByPath('./files/21.txt')
     8 })
     9 .then(function(data){
    10     console.log(data)
    11 
    12     return getFileByPath('./files/3.txt')
    13 })
    14 .then(function(data){
    15     console.log(data)
    16 }).catch(function(err){  //如果前面有任何的promise执行失败,则立即终止所有的promise操作,进入catch中
    17     console.log('自己处理的错误的捕获:'+err.message)
    18 })

     JQuery中ajax使用promise指定成功回调函数:

     1  <input type="button" value="获取数据" id="btn">
     2     
     3     <script src="./node_modules/jquery/dist/jquery.min.js"></script>
     4 
     5     <script>
     6     $(function(){
     7         $('#btn').on('click',function(){
     8             $.ajax({
     9                 url:'./data.json',
    10                 type:'get',
    11                 dataType:'json',
    12                 // success(data){
    13                 //     console.log(data)
    14                 // }
    15             })
    16             .then(function(data){
    17                 console.log(data)
    18             })
    19         })
    20     })
  • 相关阅读:
    Android学习进程 Java引用 Rxjava MVP
    小试 Xcode 逆向:App 内存监控原理初探
    春招路上孤独的iOSer的心路历程(面经)
    【译】4个你需要知道的Asset Catalog的秘密
    超全!iOS 面试题汇总
    整理 iOS 9 适配中出现的坑(图文)
    旧版Xcode下载地址
    xcode 自动添加注释,生成文档
    NDK_ROOT找不到的解决方法 MACOS
    13个小技巧帮你征服Xcode
  • 原文地址:https://www.cnblogs.com/Dummer/p/11490713.html
Copyright © 2020-2023  润新知