Vue 前后端交互

Posted 2020-12-20 article-record

异步调用

• 异步效果 : 事件函数 Ajax 定时任务
• 多次异步调用依赖
  • 多次调用异步, 结果顺序不确定, 如果需要固定顺序, 必须使用嵌套

Promise 概述

Promise 是异步编程的一种解决方案 , 从语法上讲 Promise 是一个对象 , 从它可以获取到异步操作的消息;

• 可以避免多层异步调用嵌套问题
• Promise 对象提供了简洁的 api 可以轻松控制异步操作

// resolve 正确的回调 reject 错误的回调
var p = new Promise(function (resolve, reject) {
  var flag = true
  setTimeout(function () {
    if (flag) {
      resolve(‘success...‘)
    } else {
      reject(‘error...‘)
    }
  }, 2000)
})
// then 方法接收 resolve 和 reject 的返回
p.then(function (res) {
  console.log(res)
}, function (err) {
  console.log(err)
})

Promise 封装原生 Ajax

query(url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest()
    xhr.onload = function () {
      if (xhr.status === 200) {
        resolve(xhr.responseText)
      } else {
        reject(‘error...‘)
      }
    }
    xhr.open(‘get‘, url)
    xhr.send(null)
  })
}
// 多重接口调用
query(‘http://localhost:3000/data‘)
  .then(function(res) {
    console.log(res)
    return query(‘http://localhost:3000/data1‘)
  })
  .then(function (res) {
    console.log(res)
    return query(‘http://localhost:3000/data2‘)
  })
  .then(function (res) {
    console.log(res)
  })