promise一脸懵逼...

// 要求：封装一个方法，能根据路径读取文件，并把内容返回

const fs=require('fs')

const path=require('path')

1. 普通读取文件的方式

const fs=require('fs')
const path=require('path')
  
/*
fs.readFile(path.join(__dirname,'./files/1.txt'),'utf-8',(err,dataStr)=>{
    if(err) throw err
    console.log(dataStr)
})
*/

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

2.调用function

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

3.加入回调函数

function getFileByPath(fpath,callback){
    fs.readFile(fpath,'utf-8',(err,dataStr)=>{ //异步
        if(err)   throw err

        callback(dataStr)
    })
}
getFileByPath(path.join(__dirname,'./files/1.txt'),(dataStr)=>{
     console.log(dataStr+'-----')
   //结果：  111-----
})

 4.对回调函数进行修改

callback中有两个参数，一：失败的结果 二：成功的结果
   规定：如果成功后，返回的结果，应该位于callback参数的第二个位置，
                             此时第一个参数没有出错，所以第一个放一个null
             如果失败了，第一个位置放err对象，第二个位置放undefined

function getFileByPath(fpath,callback){
    fs.readFile(fpath,'utf-8',(err,dataStr)=>{
        if(err)  callback(err)

        callback(null,dataStr)
    })
}
//读一个不存在的文件，验证err
getFileByPath(path.join(__dirname,'./files/11.txt'),(err,dataStr)=>{
    //失败
    if(err) return console.log(err.message)
    //成功
    console.log(dataStr)
})  

 5.提高版

function getFileByPath(fpath,succCb,errCb){
    fs.readFile(fpath,'utf-8',(err,dataStr)=>{
        if(err)  return errCb(err)

        succCb(dataStr)
    })
}
getFileByPath(path.join(__dirname,'./files/1.txt'),function(data){
    console.log(data+"成功了")
},function(err){
    console.log("失败的结果，使用失败的回调处理"+err.message)
})

 6.需求：先读取文件1，再读取文件2，再读取文件3

function getFileByPath(fpath,succCb,errCb){
    fs.readFile(fpath,'utf-8',(err,dataStr)=>{
        if(err)  return errCb(err)

        succCb(dataStr)
    })
}

// 需求：先读取文件1，再2再3
getFileByPath(path.join(__dirname,'./files/1.txt'),function(data){
    console.log(data)

    getFileByPath(path.join(__dirname,'./files/2.txt'),function(data){
        console.log(data)

        getFileByPath(path.join(__dirname,'./files/3.txt'),function(data){
            console.log(data)
        })
    })
})

 1.Primise

// 1.Promise是一个构造函数
// 2，在Promise上，有两个函数：resolve（成功之后的回调函数）和reject（失败之后的回调函数）
// 3.在Promise 构造函数的 Prototype 属性上，有一个 .them()方法，，即只要是Promise构造函数创建的实例，都可以访问到 .then()方法
// 4.如果Promise表示一个异步操作，每次new一个promise实例时，此实例表示一个具体的异步操作
// 5.Promise创建的实例是异步操作，那么这个异步操作的结果，只能有两种状态：
// 5.1状态1：异步执行成功，在内部调用成功的回调函数 - resolve 把结果返回给调用者
// 5.2状态2：异步执行失败，在内部调用失败的回调函数 - reject  把结果返回给调用者
// 5.3由于promise的实例是异步操作，所有内部拿到操作的结果后，无法使用return 把操作的结果返回给调用者，
//    只能使用回调函数的形式，将成功或失败的结果返回给调用者

// 每当new一个Promise实例的时候，就会立即执行异步操作中的代码，
// 即，new的时候，除了能得到一个promise实例外，还会调用为promise构造函数传递的那个function，执行此function中的异步操作代码

const fs=require('fs')
/*var promise=new Promise(function(){
    fs.readFile('./files/2.txt','utf-8',(err,dataStr)=>{
        if(err) throw err
        console.log(dataStr)
    })
})
*/

/*function getFileByPath(fpath){
    var promise=new Promise(function(){
        fs.readFile(fpath,'utf-8',(err,dataStr)=>{
            if(err) throw err
            console.log(dataStr)
        })
    }) 
}
getFileByPath('./files/2.txt')
*/

function getFileByPath(fpath){
    var promise=new Promise(function(resolve,reject){
        fs.readFile(fpath,'utf-8',(err,dataStr)=>{
            if(err) return reject(err)
            resolve(dataStr)
        })
    }) 
    return promise
}
var p=getFileByPath('./files/2.txt')
p.then(function(data){
    console.log(data+'------')
},function(err){
    console.log(err+'------')
})

 改进：

function getFileByPath(fpath){
    return new Promise(function(resolve,reject){
        fs.readFile(fpath,'utf-8',(err,dataStr)=>{
            if(err) return reject(err)
            resolve(dataStr)
        })
    }) 
}
getFileByPath('./files/2.txt')
.then(function(data){
    console.log(data+'------')
},function(err){
    console.log(err+'------')
})

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

const fs=require('fs')

function getFileByPath(fpath){
    return new Promise(function(resolve,reject){
        fs.readFile(fpath,'utf-8',(err,dataStr)=>{
            if(err) return reject(err)
            resolve(dataStr)
        })
    }) 
}
// 先读取1，后2 再3
// 注意：通过.then指定 回调函数的时候，成功的回调函数，必须传，失败的回调，可以省略不传
getFileByPath('./files/1.txt')
.then(function(data){
    console.log(data)

    return getFileByPath('./files/2.txt')
})
.then(function(data){
    console.log(data)

    return getFileByPath('./files/3.txt')
})
.then(function(data){
    console.log(data)
})

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

// 如果前面的promise执行失败，不想让后续的Promise被终止，可以为每个promise指定失败的操作
getFileByPath('./files/11.txt')
.then(function(data){
    console.log(data)

    return getFileByPath('./files/2.txt')
},function(err){
    console.log('1失败了，2继续'+err.message)
    // 返回新的promise
    return getFileByPath('./files/2.txt')
})
.then(function(data){
    console.log(data)

    return getFileByPath('./files/3.txt')
})
.then(function(data){
    console.log(data)
})

console.log('为什么会执行我？')

PS D:\webstorm\01\promise> node .\04.使用promise解决回调地狱.js
为什么会执行我？
1失败了，2继续ENOENT: no such file or directory, open 'D:\webstorm\01\promise\files\11.txt'
222
333

 有依赖关系时，异常捕获：

/ 有时候，需求：与上面的需求刚好相反，如果后续的promise执行，依赖于前面promise执行的结果，
// 如果前面失败了，则后面的就没有继续执行下去的意义
getFileByPath('./files/1.txt')
.then(function(data){
    console.log(data)

    return getFileByPath('./files/21.txt')
})
.then(function(data){
    console.log(data)

    return getFileByPath('./files/3.txt')
})
.then(function(data){
    console.log(data)
}).catch(function(err){  //如果前面有任何的promise执行失败，则立即终止所有的promise操作，进入catch中
    console.log('自己处理的错误的捕获：'+err.message)
})

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

 <input type="button" value="获取数据" id="btn">
    
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>

    <script>
    $(function(){
        $('#btn').on('click',function(){
            $.ajax({
                url:'./data.json',
                type:'get',
                dataType:'json',
                // success(data){
                //     console.log(data)
                // }
            })
            .then(function(data){
                console.log(data)
            })
        })
    })