AJAX, Promise, Async Example

backup-index.md

keywords: aync, await

const fse = require('fs-extra')
const path = require('path')
const { exec } = require('child_process')

// NOTE: src 和 dist 都必需是資料夾，不能是檔案
let backupFiles = [
  {
    description: 'Notes written in markdown',
    src: '/Users/pjchender/Projects/Note/source/_posts',
    dist: path.join(__dirname, './MarkdownNotes')
  },
  {
    description: 'Notes SCSS template use in Codepen',
    src: '/Users/pjchender/Projects/Note/source/TEMPLATE',
    dist: path.join(__dirname, './Template')
  },
  {
    description: 'VSCode snippets, user settings',
    src: '/Users/pjchender/Library/Application Support/Code/User',
    dist: path.join(__dirname, './VSCode')
  },
  {
    description: 'Sublime Text',
    src: '/Users/pjchender/Library/Application Support/Sublime Text 3/Packages/User',
    dist: path.join(__dirname, './Sublime')
  }
]

/**
 * 先建立所有相關的資料夾
 */
function mkdirs (backupFiles) {
  return new Promise((resolve, reject) => {
    let distDirs = backupFiles.map(item => fse.ensureDir(item.dist))
    Promise.all(distDirs)
    .then(data => {
      resolve('mkdir successfully')
    })
    .catch(err => {
      console.error(err)
    })
  })
}

/**
 * 將檔案複製到資料夾中
 */
function cpdirs (backupFiles) {
  return new Promise((resolve, reject) => {
    let copyDirs = backupFiles.map(item => fse.copy(item.src, item.dist))
    Promise.all(copyDirs)
    .then(data => {
      resolve('copy directories successfully')
    })
    .catch(err => {
      console.error(err)
    })
  })
}

/**
 * 其他命令
 */
function execCMD () {
  return new Promise((resolve, reject) => {
    // use command line to list all installed extensions
    exec('code --list-extensions', (error, stdout, stderr) => {
      if (error) {
        console.error(`exec error: ${error}`)
        return
      }

      // save the result into file
      fse.writeFile(path.join(__dirname, './VSCode/installed-extension.txt'), stdout, err => {
        if (err) { return console.error(err) }
        resolve(`exec cmd successfully`)
      })
    })
  })
}

/**
 * 主要執行的程式
 */
async function main (backupFiles) {
  let mkdirsResult = await mkdirs(backupFiles)
  console.log('mkdirsResult', mkdirsResult)
  let cpdirsResult = await cpdirs(backupFiles)
  console.log('cpdirsResult', cpdirsResult)
  let execCMDResult = await execCMD()
  console.log('execCMDResult', execCMDResult)
  console.log('---All Files been Backup')
}

main(backupFiles)

Basic Promise.md

/**
 * Basic Use of Promise
 **/

const basicPromise = new Promise((resolve, reject) => {
  setTimeout(function() {
    resolve('Get Data Succefful')
  }, 1000)
})

// when data "resolve/reject" will run callback below
basicPromise.then((value) => {
  console.log(value)
})

/**
 * Error Handling
 **/
const errorHandlingPromise = new Promise((resolve, reject) => {
  setTimeout(function() {
    reject('Get Data Failed')
  }, 1000)
})

errorHandlingPromise.then((value) => {
	console.log(value)
}, (error) => {
	console.log(error)
})

einvoices-new.md

keywords: jQuery, AJAX

使用 .then() 來串連 AJAX 請求，適合用在需要先取得 Token 在發下一個請求的情況。

/**
 * Einvoice
 * app/javascript/components/einvoices-new.vue
 * Use .then to chain AJAX
 **/

let vm = this
const ENDPOINT = 'http://localhost:3000'
const CREDENTIAL = JSON.stringify({
  "auth": {
    "identifier": "54320091",
    "password": "12345678"
  }
})
let einvoice_token = ''
// Get einvoice token
$.ajax({
  type: "POST",
  beforeSend: function(xhr) {
    xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
  },
  url: ENDPOINT + '/merchant_token',
  dataType: "json",
  contentType: 'application/json',
  crossDomain: true,
  data: CREDENTIAL
}).done(function(data) {
  einvoice_token = data.jwt
  console.log('get jwt token')
}).fail((jqXHR, textStatus, errorThrown) => {
  console.log('fail', textStatus, errorThrown)
}).then(function() {
  // Send data after getting einvoice token
  $.ajax({
    type: "POST",
    beforeSend: function(xhr) {
      xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
    },
    url: ENDPOINT + '/v1/b2c/c0401',
    headers: {
      Authorization: `Bearer ${einvoice_token}`
    },
    dataType: "json",
    // processData: false,
    contentType: 'application/json',
    crossDomain: true,
    data: vm.dataToSend
  }).done(function(data) {
    console.log(data)
  }).fail((jqXHR, textStatus, errorThrown) => {
    console.log('fail', textStatus, errorThrown)
  })
})