promise的使用场景

作者: web_jianshu | 来源:发表于2020-05-21 10:30 被阅读0次

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

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

  </head>

  <body>

    <form action="" id="user_form"></form>

    <script type="text/template" id="tpl">

      <div>

          <label for="">用户名</label>

          <input type="text" value="{{ user.username }}" value="">

      </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

      //     })

      // })

      // 这个 get 是 callback 方式的 API

      // function get(path, callback) {

      //     var xml = new XMLHttpRequest()

      //     xml.open('get', path, true)

      //     xml.send()

      //     // 当请求加载成功之后要调用指定的函数

      //     xml.onload = function () {

      //         // 我现在需要的到这里的 xml.responseText

      //         callback(xml.responseText)

      //     }

      // }

      // 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;

        })

        .catch(err => {

          throw err;

        });

      function pGet(path, callback) {

        return new Promise(function(resolve, reject) {

          var xml = new XMLHttpRequest();

          xml.open("get", path, true);

          xml.send();

          // 当请求加载成功之后要调用指定的函数

          xml.onload = function() {

            // 我现在需要得到这里的 xml.responseText

            callback && callback(JSON.parse(xml.responseText));

            resolve(JSON.parse(xml.responseText));

          };

          xml.onerror = function(err) {

            reject(err);

          };

        });

      }

      // callback方式

      // pGet('http://127.0.0.1:3000/users/4', function (data) {

      //     console.log(data);

      // })

      // .then方式

      // pGet("http://127.0.0.1:3000/users/4").then(function(data) {

      //     console.log(data);

      // });

    </script>

  </body>

</html>

data.json

{
  "users": [
    {
      "id": 1,
      "username": "admin",
      "age": 18,
      "job": 2
    },
    {
      "id": 2,
      "username": "admin2",
      "age": 18,
      "job": 4
    },
    {
      "id": 3,
      "username": "admin3",
      "age": 18,
      "job": 2
    },
    {
      "id": 4,
      "username": "admin4",
      "age": 18,
      "job": 3
    }
  ],
  "jobs": [
    {
      "id": 1,
      "name": "学生"
    },
    {
      "id": 2,
      "name": "教师"
    },
    {
      "id": 3,
      "name": "司机"
    },
    {
      "id": 4,
      "name": "画家"
    },
    {
      "id": 5,
      "name": "演员"
    },
    {
      "id": 6,
      "name": "医生"
    }
  ]
}