Promise 封装 API

2022-07-03 178

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Promise 封装 API

1. 封装 readFile

封装

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)
  })

2. 封装 ajax 请求

封装

// get 是 callback 方式的 API
function get(url, callback) {
  var oReq = new XMLHttpRequest()
  // 当请求加载成功之后要调用指定的函数
  oReq.onload = function () {
    // 我现在需要得到这里的 oReq.responseText
    callback(oReq.responseText)
  }
  oReq.open("get", url, true)
  oReq.send()
}

使用

get('http://127.0.0.1:3000/student/1', function (userData) {
  get('http://127.0.0.1:3000/class', function (jobsData) {
    var htmlStr = template('tpl', {
      user: JSON.parse(userData),
      jobs: JSON.parse(jobsData)
    })
    console.log(htmlStr)
    document.querySelector('#user_form').innerHTML = htmlStr
  })
})

3. Promise 封装案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="from.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>
    // 方法1 ：jquery
    /*********************************************/
    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
      })
    /*********************************************/
    /**
     * 方法2 ：Promise封装
     */
    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()
      })
    }
  </script>
</body>
</html>

Promise 封装 API

1. 封装 readFile

封装

使用

2. 封装 ajax 请求

封装

使用

3. Promise 封装案例

热门文章

最新文章

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

Promise 封装 API

1. 封装 readFile

封装

使用

2. 封装 ajax 请求

封装

使用

3. Promise 封装案例

热门文章

最新文章

相关电子书

相关实验场景