手写promise

最新推荐文章于 2023-05-30 08:44:50 发布

一晌贪欢i

最新推荐文章于 2023-05-30 08:44:50 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/qq_27674439/article/details/100049109

版权

05-promise-api.js



var fs = require('fs')

var p1 = new Promise(function (resolve, reject) {
  fs.readFile('./data/a.txt', 'utf8', function (err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})

var p2 = new Promise(function (resolve, reject) {
  fs.readFile('./data/b.txt', 'utf8', function (err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})

var p3 = new Promise(function (resolve, reject) {
  fs.readFile('./data/c.txt', 'utf8', function (err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})

p1
  .then(function (data) {
    console.log(data)
    // 当 p1 读取成功的时候
    // 当前函数中 return 的结果就可以在后面的 then 中 function 接收到
    // 当你 return 123 后面就接收到 123
    //      return 'hello' 后面就接收到 'hello'
    //      没有 return 后面收到的就是 undefined
    // 上面那些 return 的数据没什么卵用
    // 真正有用的是：我们可以 return 一个 Promise 对象
    // 当 return 一个 Promise 对象的时候，后续的 then 中的 方法的第一个参数会作为 p2 的 resolve
    // 
    return p2
  }, function (err) {
    console.log('读取文件失败了', err)
  })
  .then(function (data) {
    console.log(data)
    return p3
  })
  .then(function (data) {
    console.log(data)
    console.log('end')
  })

06-封装promise-API.js



var fs = require('fs')

function pReadFile(filePath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(filePath, 'utf8', function (err, data) {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}

pReadFile('./data/a.txt')
  .then(function (data) {
    console.log(data)
    return pReadFile('./data/b.txt')
  })
  .then(function (data) {
    console.log(data)
    return pReadFile('./data/c.txt')
  })
  .then(function (data) {
    console.log(data)
  })

07-promise使用场景.html

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <form action="00-js中的一等公民函数.js" id="user_form">
  </form>
  <script type="text/template" id="tpl">
    <div>
      <label for="">用户名</label>
      <input type="text" value="{{ user.username }}">
    </div>
    <div>
      <label for="">年龄</label>
      <input type="text" value="{{ user.age }}">
    </div>
    <div>
      <label for="">职业</label>
      <select name="" id="">
        {{ each jobs }} {{ if user.job === $value.id }}
        <option value="{{ $value.id }}" selected>{{ $value.name }}</option>
        {{ else }}
        <option value="{{ $value.id }}">{{ $value.name }}</option>
        {{ /if }} {{ /each }}
      </select>
    </div>
  </script>
  <script src="node_modules/art-template/lib/template-web.js"></script>
  <script src="node_modules/jquery/dist/jquery.js"></script>
  <script>
    // 用户表
    //  其中一个接口获取用户数据
    //  职业：2
    // 职业信息表
    //  其中一个接口获取所有的职业信息
    // get('http://127.0.0.1:3000/users/4', function (userData) {
    //   get('http://127.0.0.1:3000/jobs', function (jobsData) {
    //     var htmlStr = template('tpl', {
    //       user: JSON.parse(userData),
    //       jobs: JSON.parse(jobsData)
    //     })
    //     console.log(htmlStr)
    //     document.querySelector('#user_form').innerHTML = htmlStr
    //   })
    // })

    // var data = {}
    // $.get('http://127.0.0.1:3000/users/4')
    //   .then(function (user) {
    //     data.user = user
    //     return $.get('http://127.0.0.1:3000/jobs')
    //   })
    //   .then(function (jobs) {
    //     data.jobs = jobs
    //     var htmlStr = template('tpl', data)
    //     document.querySelector('#user_form').innerHTML = htmlStr
    //   })

    // var data = {}
    // pGet('http://127.0.0.1:3000/users/4')
    //   .then(function (user) {
    //     data.user = user
    //     return pGet('http://127.0.0.1:3000/jobs')
    //   })
    //   .then(function (jobs) {
    //     data.jobs = jobs
    //     var htmlStr = template('tpl', data)
    //     document.querySelector('#user_form').innerHTML = htmlStr
    //   })

    // pGet('http://127.0.0.1:3000/users/4', function (data) {
    //   console.log(data)
    // })

    pGet('http://127.0.0.1:3000/users/4')
      .then(function (data) {
        console.log(data)
      })

    function pGet(url, callback) {
      return new Promise(function (resolve, reject) {
        var oReq = new XMLHttpRequest()
        // 当请求加载成功之后要调用指定的函数
        oReq.onload = function () {
          // 我现在需要得到这里的 oReq.responseText
          callback && callback(JSON.parse(oReq.responseText))
          resolve(JSON.parse(oReq.responseText))
        }
        oReq.onerror = function (err) {
          reject(err)
        }
        oReq.open("get", url, true)
        oReq.send()
      })
    }


    // 这个 get 是 callback 方式的 API
    // 可以使用 Promise 来解决这个问题
    function get(url, callback) {
      var oReq = new XMLHttpRequest()
      // 当请求加载成功之后要调用指定的函数
      oReq.onload = function () {
        // 我现在需要得到这里的 oReq.responseText
        callback(oReq.responseText)
      }
      oReq.open("get", url, true)
      oReq.send()
    }
  </script>
</body>

</html>

08-mongoose所有的API都支持promise.js

var mongoose = require('mongoose')

var Schema = mongoose.Schema

// 1. 连接数据库
// 指定连接的数据库不需要存在，当你插入第一条数据之后就会自动被创建出来
mongoose.connect('mongodb://localhost/itcast')

// 2. 设计文档结构（表结构）
// 字段名称就是表结构中的属性名称
// 约束的目的是为了保证数据的完整性，不要有脏数据
var userSchema = new Schema({
  username: {
    type: String,
    required: true // 必须有
  },
  password: {
    type: String,
    required: true
  },
  email: {
    type: String
  }
})

// 3. 将文档结构发布为模型
//    mongoose.model 方法就是用来将一个架构发布为 model
//    第一个参数：传入一个大写名词单数字符串用来表示你的数据库名称
//                 mongoose 会自动将大写名词的字符串生成 小写复数 的集合名称
//                 例如这里的 User 最终会变为 users 集合名称
//    第二个参数：架构 Schema
//   
//    返回值：模型构造函数
var User = mongoose.model('User', userSchema)


// 4. 当我们有了模型构造函数之后，就可以使用这个构造函数对 users 集合中的数据为所欲为了（增删改查）
// **********************
// #region /新增数据
// **********************
// var admin = new User({
//   username: 'zs',
//   password: '123456',
//   email: 'admin@admin.com'
// })

// admin.save(function (err, ret) {
//   if (err) {
//     console.log('保存失败')
//   } else {
//     console.log('保存成功')
//     console.log(ret)
//   }
// })
// **********************
// #endregion /新增数据
// **********************




// **********************
// #region /查询数据
// **********************
// User.find(function (err, ret) {
//   if (err) {
//     console.log('查询失败')
//   } else {
//     console.log(ret)
//   }
// })

// 用户注册
// 1. 判断用户是否存在
//    如果已存在，结束注册
//    如果不存在，注册（保存一条用户信息）
User.find()
  .then(function (data) {
    console.log(data)
  })

// User.findOne({ username: 'aaa' }, function (user) {
//   if (user) {
//     console.log('已存在')
//   } else {
//     new User({
//       username: 'aaa',
//       password: '123',
//       email: 'dsadas'
//     }).save(function () {
      
//     })
//   }
// })

// User.findOne({
//     username: 'aaa'
//   })
//   .then(function (user) {
//     if (user) {
//       // 用户已存在，不能注册
//       console.log('用户已存在')
//     } else {
//       // 用户不存在，可以注册
//       return new User({
//         username: 'aaa',
//         password: '123',
//         email: 'dsadas'
//       }).save()
//     }
//   })
//   .then(function (ret) {
//   })

// User.find({
//   username: 'zs'
// }, function (err, ret) {
//   if (err) {
//     console.log('查询失败')
//   } else {
//     console.log(ret)
//   }
// })

// User.findOne({
//   username: 'zs'
// }, function (err, ret) {
//   if (err) {
//     console.log('查询失败')
//   } else {
//     console.log(ret)
//   }
// })
// **********************
// #endregion /查询数据
// **********************



// **********************
// #region /删除数据
// **********************
// User.remove({
//   username: 'zs'
// }, function (err, ret) {
//   if (err) {
//     console.log('删除失败')
//   } else {
//     console.log('删除成功')
//     console.log(ret)
//   }
// })
// **********************
// #endregion /删除数据
// **********************


// **********************
// #region /更新数据
// **********************
// User.findByIdAndUpdate('5a001b23d219eb00c8581184', {
//   password: '123'
// }, function (err, ret) {
//   if (err) {
//     console.log('更新失败')
//   } else {
//     console.log('更新成功')
//   }
// })
// **********************
// #endregion /更新数据
// **********************

手写一个 promise

一个最简单的 promise 构造函数，接收一个函数并执行，给函数传递一个成功的回调函数，成功之后执行回调函数

function Promise(fn){
    var callback = null
    this.then = function(onResolved){
        callback = onResolved
    }
    function resolve(value){
        callback(value)
    }
    fn(resolve)
}

上面的代码有问题，因为在 Promise 实例化的时候，callback 此时还是 null，可以用 setTimeout 来解决这个问题

function Promise(fn){
    var callback = null
    this.then = function(onResolved){
        callback = onResolved
    }
    function resolve(value){
        setTimeout(function(){
            callback(value)
        }, 0)
        
    }
    fn(resolve)
}

试试调用这个 Promise

// 没有 .then 绑定 callback，直接 resolve 都会出错
var p = new Promise(function(cb){
    cb(1) // callback 此时还是 null
})

var p = new Promise(function(cb){
    setTimeout(function(){
     cb(2) callback 此时还是 null
    }, 0)
})
// 先生成 promise 实例，然后 .then 绑定回调函数
function getUserId(){
    return new Promise(function(cb){
        setTimeout(function(){
            cb(3)
        }, 0)
    })
}
function showUserId(id){
    console.log(id)
}
getUserId().then(showUserId)
给 Promise 实例添加多个回调

function Promise(fn){
    var callbacks = []
    this.then = function(onResolved){
        callbacks.push(onResolved)
    }
    function resolve(value){
        setTimeout(function(){
            callbacks.forEach(function(callback){
                callback(value)
            })
        }, 0)
        
    }
    fn(resolve)
}

试试多个回调

function showUserIdAgain(id){
    console.log('Again' + id)
}
getUserId().then(showUserId)
getUserId().then(showUserIdAgain)

一般情况下我们会同步调用 .then 方法的时候，但是有的时候会异步调用 .then 方法。比如买泡面和烧开水，先去买泡面，买好回家水已经烧开了，这时再吃泡面。

function boilWater(){ // 烧开水
    return new Promise(function(resolve){
        setTimeout(function(){
            resolve('开水')
        }, 1000)
    })
}

function buyNoodle(){ // 买泡面
    return new Promise(function(resolve){
        setTimeout(function(){
            resolve('泡面')
        }, 2000)
    })
}
 var promiseOfWater = boilWater()

 buyNoodle.then(function(noodle){
     promiseOfWater.then(function(water){
         console.log(noodel + '买好了' + water + '也烧开了')
     })
 })

要让 promise 在调用 resolve 之后，还能执行通过 then 添加的回调方法，需要用一个标记区分 promise 状态，如果 promise 还是 pending 状态，那么把 callback 放进回调数组，如果 promise 已经是 fullfilled 状态，直接调用 callback 方法

function Promise(fn){
    var callbacks = []
    var state = 'pending'
    var value = null
    this.then = function(onResolved){
        if(state === 'pending'){
            callbacks.push(onResolved)
        }else{
            onResolved(value)
        }
        return this
        
    }
    function resolve(newValue){
        value = newValue
        state = 'fullfilled'
        setTimeout(function(){
            callbacks.forEach(function(callback){
                callback(value)
            })
        }, 0)
        
    }
    fn(resolve)
}

实现 .then 的链式调用，假设吃泡面是这样的

var promiseOfWater = boilWater()

boilWater().then(makeNoodle).then(eat)

.then 要返回 promise 实例，这个promise 实例要做的事情是：

在上一个 promise 执行 resolve 之后，先调用 onResolved 回调；
把得到的结果作为参数放到自身的 then 回调中执行

function Promise(fn){
    var handlers = []
    var state = 'pending'
    var value = null
    
    this.then = function(onResolved){
        return new Promise(function(resolve){
            handle({
                onResolved,
                resolve,
            })
        })
    }
    function handle(handler){
        if(state === 'pending'){
            handlers.push(handler)
        }else{
            if(handler.onResolved){
                var res = handler.onResolved(value)
                handler.resolve(res)
            }else{
                handler.resolve(value)
            }
        }
    }
    function resolve(newValue){
        value = newValue
        state = 'fullfilled'
        setTimeout(function(){
            handlers.forEach(function(handler){
                handle(handler)
            })
        }, 0)
    }
    fn(resolve)
}

在 promise 构造函数的 resolve 方法里要判断参数是不是 promise 实例，如果是的话，就先调用实例的 then 方法

function Promise(fn){
    var handlers = []
    var state = 'pending'
    var value = null
    
    this.then = function(onResolved){
        return new Promise(function(resolve){ // 返回 promise 实例，方便链式调用
            handle({
                onResolved,
                resolve,
            })
        })
    }
    function handle(handler){
        if(state === 'pending'){
            handlers.push(handler)
        }else{
            if(handler.onResolved){
                var res = handler.onResolved(value)
                handler.resolve(res)
            }else{
                handler.resolve(value)
            }
        }
    }
    // 如果 newValue 是 promise 实例，直接调用 .then 方法
    function resolve(newValue){
        if(typeof newValue === 'object' && typeof newValue.then === 'function'){
            // resolve 就是当前这个定义函数
            newValue.then(resolve)
        }else{
            value = newValue
            state = 'fullfilled'
            setTimeout(function(){
                handlers.forEach(function(handler){
                    handle(handler)
                })
            }, 0)
        }
        
    }
    fn(resolve)
}

处理 reject 的情况

function Promise(fn){
    var handlers = []
    var state = 'pending'
    var value = null
    
    this.then = function(onResolved, onRejected){
        return new Promise(function(resolve, reject){ // 返回 promise 实例，方便链式调用
            handle({
                onResolved,
                resolve,
                onRejected,
                reject,
            })
        })
    }
    function handle(handler){
        if(state === 'pending'){
            handlers.push(handler)
        }else if(state === 'fullfilled'){
            if(handler.onResolved){
                var res = handler.onResolved(value)
                handler.resolve(res)
            }else{
                handler.resolve(value)
            }
        }else{
            if(handler.onRejected){
                var res = handler.onRejected(value)
                // 因为前一个 promise 中有处理 reject 的情况
                // 所以直接调用下一个 promise 的 resolve
                handler.resolve(res)
            }else{
                handler.reject(value)
            }
        }
    }
    // 如果 newValue 是 promise 实例，直接调用 .then 方法
    function resolve(newValue){
        if(typeof newValue === 'object' && typeof newValue.then === 'function'){
            // resolve 就是当前这个定义函数
            newValue.then(resolve, reject)
        }else{
            value = newValue
            state = 'fullfilled'
            setTimeout(function(){
                handlers.forEach(function(handler){
                    handle(handler)
                })
            }, 0)
        }
        
    }
    function reject(reason){
        value = reason
        state = 'rejected'
        setTimeout(function(){
            handlers.forEach(function(handler){
                handle(handler)
            })
        }, 0)
    }
    fn(resolve, reject)
}

最后再处理异常的情况

function Promise(fn){
    var handlers = []
    var state = 'pending'
    var value = null
    
    this.then = function(onResolved, onRejected){
        return new Promise(function(resolve, reject){ // 返回 promise 实例，方便链式调用
            handle({
                onResolved,
                resolve,
                onRejected,
                reject,
            })
        })
    }
    function handle(handler){
        if(state === 'pending'){
            handlers.push(handler)
        }else if(state === 'fullfilled'){
            if(handler.onResolved){
                try {
                    var res = handler.onResolved(value)
                    handler.resolve(res)
                } catch(e) {
                    handler.reject(e)
                }
                
            }else{
                handler.resolve(value)
            }
        }else{
            if(handler.onRejected){
                try {
                    var res = handler.onRejected(value)
                    // 因为前一个 promise 中有处理 reject 的情况
                    // 所以直接调用下一个 promise 的 resolve
                    handler.resolve(res)
                } catch(e) {
                    handler.reject(e)
                }
            }else{
                handler.reject(value)
            }
        }
    }
    // 如果 newValue 是 promise 实例，直接调用 .then 方法
    function resolve(newValue){
        try {
            if (typeof newValue === 'object' && typeof newValue.then === 'function'){
                // resolve 就是当前这个定义函数
                newValue.then(resolve, reject)
            } else {
                value = newValue
                state = 'fullfilled'
                setTimeout(function(){
                    handlers.forEach(function(handler){
                        handle(handler)
                    })
                }, 0)
            }
        } catch(e) {
            reject(e)
        }
    }
    function reject(reason){
        value = reason
        state = 'rejected'
        setTimeout(function(){
            handlers.forEach(function(handler){
                handle(handler)
            })
        }, 0)
    }
    fn(resolve, reject)
}