Promise 封装 API

╰半夏微凉° 2022-10-31 15:58 193阅读 0赞

### 文章目录 ###

*  1. 封装 readFile
 *   *  封装
     *  使用
 *  2. 封装 ajax 请求
 *   *  封装
     *  使用
 *  3. Promise 封装案例

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