15. Promise 使用场景

作者: 璎珞纨澜 | 来源:发表于2019-04-18 11:55 被阅读0次

15. Promise 使用场景
10.Promise函数
Promise
promise 解决回调地狱。
漫谈promise使用场景
promise的使用场景
promise的使用场景
2018-08-22 关于Promise
Promise 静态 API 的使用方法
如何讲清楚async和await？

Json-server

json-server 是为前端开发人员创建 mock-server 的工具，测试阶段可以用来快速模拟后端请求以及请求回来的过程。

json-server 网址：https://github.com/typicode/json-server

安装 json-server：

安装 json-server 在项目路径开启 json 数据接口服务，看到下图即为成功开启：

开启 json 数据接口服务并访问网址可以通过控制台上的网址访问接口数据，得到 json 文件中的数据集合/对象：

访问接口数据

http-server

http-server 是一个简单的零配置命令行 http 服务器。可以用于测试、本地开发和学习。

安装 http-server：

安装 http-server 在项目路径下开启 http 服务器：

开启 http 服务器
开启后网页会自动打开：

自动打开的网页

案例 - 调用多个数据接口

db.json

{
  "users": [
    {
      "id": 1,
      "username": "小明",
      "age": 18,
      "job": 2
    },
    {
      "id": 2,
      "username": "小红",
      "age": 18,
      "job": 4
    },
    {
      "id": 3,
      "username": "小亮",
      "age": 18,
      "job": 1
    },
    {
      "id": 4,
      "username": "小张",
      "age": 18,
      "job": 3
    }
  ],
  "jobs": [
    {
      "id": 1,
      "name": "学生"
    },
    {
      "id": 2,
      "name": "老师"
    },
    {
      "id": 3,
      "name": "画家"
    },
    {
      "id": 4,
      "name": "演员"
    }
  ]
}

db.json 文件中有定义了两个成员，将该文件通过 json-server 开启数据接口服务后，可以通过 http://127.0.0.1:3000/users 获取用户数据，和 http://127.0.0.1:3000/jobs 获取职业信息。由于需要请求多个接口数据，代码必然会存在嵌套调用产生的回调地狱问题：

<body>
    <form 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>
        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
            })
        })
        function get(url, callback) {
            var oReq = new XMLHttpRequest();
            oReq.onload = function () {
                // 当请求加载成功之后调用指定的回调函数
                callback(oReq.responseText)
            }
            oReq.open("get", url, true);
            oReq.send();
        }
    </script>
</body>
</html>

案例页面效果

自定义封装 Promise 实现案例

为了解决上述案例中的回调地狱的问题，我们尝试自己封装 Promise 来解决：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ducument</title>
</head>
<body>
    <form 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>
        var data = {}
        pGet('http://127.0.0.1:3000/users/3')
            .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
            })

        function pGet(url, callback) {
            return new Promise(function (resolve, reject) {
                var oReq = new XMLHttpRequest();
                oReq.onload = function () {
                    callback && callback(oReq.responseText)
                    resolve(JSON.parse(oReq.responseText))
                }
                oReq.onerror = function(err) {
                    reject(err)
                }
                oReq.open("get", url, true);
                oReq.send();
            })
        }
    </script>
</body>
</html>

使用 Jquery 实现案例

其实 Jquery 实现了 Promise 功能，使用 Jquery 同样可以达到同样的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ducument</title>
</head>
<body>
    <form 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>
        var data = {}
        $.get('http://127.0.0.1:3000/users/3')
            .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
            })
    </script>
</body>
</html>

Mongoose 案例

Mongoose 所有API 支持 promise。例如以下的用户注册问题，注册需要判断用户是否存在，如果存在结束注册，如果不存在，注册：

var mongoose = require('mongoose')
var Schema = mongoose.Schema
mongoose.connect('mongodb://localhost/itcast')
var userSchema = new Schema({
  username: {
    type: String,
    required: true // 必须有
  },
  password: {
    type: String,
    required: true
  },
  email: {
    type: String
  }
})
var User = mongoose.model('User', userSchema)

User.findOne({ 
  username: 'aaa' 
})
  .then(function (user) {
    if (user) {
    console.log('用户已存在')
    } else {
      return new User({
        username: 'aaa'
        password: '123'
        emial: '123@a.com'
      }).save()
    }
  })
  .then(function (ret) {
    // 继续...
  })

15. Promise 使用场景
Json-server json-server 是为前端开发人员创建 mock-server 的工具，测试阶段可以...
10.Promise函数
Promise.resolve()与new Promise(r => r(v))promise的使用场景promi...
Promise
1.es6为什么会出现promise/解决了什么问题 2.promise的使用场景 3.promise的使用方法 ...
promise 解决回调地狱。
ES6的promise的语言标准。promise/A+规范2.如何使用3.场景。 promiseObj.then(...
漫谈promise使用场景
深入理解promise 对于现在的前端同学来说你不同promise你都不好意思出门了。对于前端同学来说promis...
promise的使用场景
Document 用户名年龄职业 {{eachjobs}} {{ifus...
promise的使用场景
data.json
2018-08-22 关于Promise
Promise在new实例化时会立即执行，所以所有的Promise都应该封装在一个function中：使用场景：...
Promise 静态 API 的使用方法
Promise.all 使用场景：假设我们希望许多 Promise 并行执行，并等待它们都准备好。一个实际例子是...
如何讲清楚async和await？
async和await要搭配Promise使用, 它进一步极大的改进了Promise的写法来看一个简单的场景: ...