Promiseの基本使用とAjaxのjQueryパッケージ

20328 ワード

node

Promiseの基本使用
コールバック地獄問題を解決するために、解決策を提供します.

/**
 * Promise
 *
 * 1. Promise           new Vue()
 * 2. Promise()       ,          () => {}
 *          
 *    resolve f          resolve  =>    resolve => then()
 *    reject  f          reject
 * 3.   Promise         
 

/**
 * 1. p      Promise  
 * 2. axios.get() Promise   
 * 3. axios.get().then()
 * 4. p.then()
 * xxxx.then() xxxx       promise
 */

const p = new Promise((resolve, reject) => {
  console.log('           ')

  //    :        
  setTimeout(() => {
    //             == resolve == then
    // resolve('   ')

    //             == reject == catch
    reject('   ')
  }, 1000)
})

p.then(res => {
  console.log(' then ', res)
}).catch(err => {
  console.log(' catch ', err)
})

// axios.get().then()

複数のファイルを読み込むときに使用できます.


ml_read('./a.txt')
  .then(res => {
    console.log('a', res)
    return ml_read('./b.txt')
  })
  .then(res => {
    console.log('b', res)
    return ml_read('./c.txt')
  })
  .then(res => {
    console.log('c', res)
  })

async...await...の使用

let fs = require('fs')
/**
 * @name ml_read
 * @desc       
 * @param
 * @return
 */
function ml_read(path) {
  //1.    promise   
  let p = new Promise((resolve, reject) => {
    fs.readFile(path, 'utf-8', (err, data) => {
      if (err) {
        return reject('   ')
      }
      resolve(data)
    })
  })

  //2.       promise   
  return p
}
// ****************************         promise    ml_read  ***********

/**
 *  async   await   es8     
 *     :   (         )          ,        
 *
 *  async      (   await)     async  function test() { }
 *  await      promise,     promise          await promise  
 */

async function test() {
  // then           (res)
  // ml_read('./a.txt').then(res => {
  //    console.log(res)
  // })

  // await           (res)
  let resa = await ml_read('./a.txt')
  console.log(resa)

  let resb = await ml_read('./b.txt')
  console.log(resb)

  let resc = await ml_read('./c.txt')
  console.log(resc)
}

test()

/**
 *     
 *     : a => b => c
 */
// ml_read('./a.txt')
//   .then(res => {
//     console.log('a', res)
//     return ml_read('./b.txt')
//   })
//   .then(res => {
//     console.log('b', res)
//     return ml_read('./c.txt')
//   })
//   .then(res => {
//     console.log('c', res)
//   })

注意点およびtry...catch...の使用:

1.asyncとawaitはペアで

現れる
*asyncがない:SyntaxError:await is only valid in async function
*awaitがありません:promiseタイプが印刷されます
* 2. asyncとawaitの例外の処理方法
*try…catch()問題がなければ=>catchをスキップし、問題があればcatchにキャプチャされます

* 3. async近接原則、asyncはawaitの最も近い関数の前に追加します(コールバックに注意してください)
3つのステータス:
Promiseの3つの状態
*pending保留中
*fulfilled完了<==resolve()成功
*rejected却下<==reject()失敗
テスト:AjaxをJqueryパッケージする


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
  head>
  <body>
    <script src="./node_modules/jquery/dist/jquery.js">script>
    <script>
      //http://localhost:3000

      // $.ajax({
      //   //   
      //   type: 'get',
      //   //   
      //   url: 'http://127.0.0.1:3000/post?pageIndex=1&pageSize=2&category=8',
      //   //   
      //   data: {},
      //   //       
      //   dataType: 'json',
      //   //   
      //   success: res => {
      //     console.log('  ', res)
      //   },
      //   //   
      //   error: err => {
      //     console.log('  ', err)
      //   },
      // })

      // 'http://127.0.0.1:3000/post?pageIndex=1&pageSize=2&category=8'

      //       
      function ml_ajax(options) {
        // 1.    promise   
        let p = new Promise((resolve, reject) => {
          $.ajax({
            //   
            type: options.method || 'get',
            //   
            url: options.url,
            //   
            data: options.data || {},
            //       
            dataType: 'json',
            //   
            success: res => {
              // console.log('  ', res)
              resolve(res)
            },
            //   
            error: err => {
              // console.log('  ', err)
              reject(err)
            },
          })
        })

        // 2.   promise   
        return p
      }

      let url = 'http://127.0.0.1:3000/post?pageIndex=1&pageSize=2&category=8'
      ml_ajax({
        url,
      }).then(res => {
        console.log('666', res)
      })
    script>
  body>
html>

JQueryでAJAXでXMLをロードして解析するスクリプトを実現

JSONのDominoでの応用