vue promise async-await try-catch axios 讲解

vue promise async-await try-catch 讲解
promise
异步函数 与 回调函数的说明
异步函数: 定时器setTimeout, ajax (异步函数的执行, 不会阻塞主线程代码的执行)
回调函数:

1. 把一个函数当成参数传递, 将来特定的时机调用, 这个函数就叫回调函数
2. 什么时候会用到回调函数, 异步的时候 ajax success error

console.log(1)
setTimeout(function() {
  console.log(2)
  setTimeout(function() {
      console.log(4)
  }, 1000)  
  console.log(5)
}, 1000)
console.log(3)

13254
回调函数的问题:

1. 回调函数的阅读性不好, 回调不会立马执行
2. 回调函数如果有大量的嵌套, 可维护性差 (回调地狱)
   promise 就是为了解决回调函数嵌套的问题而存在的
   读取文件演示回调嵌套
   
   这样读取的顺序是不一定的，和文件的大小，和计算机的性能都有关系
   
   这样读取的顺序是一定的
   promise的基本认识

// 1. 创建promise对象
// 2. 使用promise对象

const fs = require('fs')

// promise承诺, 一般承诺的是将来的事情, 可能成功 也可能失败
// 1. 创建
const p = new Promise(function(resolve, reject) {
  // promise中一般封装一个异步的操作 比如: ajax, 读写文件
  // resolve 和 reject 都是 promise 给你提供好的函数
  // resolve是需要在成功的时候调用的函数
  // reject是需要在失败的时候调用的函数
  fs.readFile('a.txt', 'utf8', (err, data) => {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})

// 2. 使用promise对象
// axios({ .. }).then(成功的函数).catch(失败的函数)
// p.then(成功的函数).catch(失败的函数)
p.then(function(data) {
  console.log(data)
}).catch(function(err) {
  console.log(err)
})


/* 
  promise:
    1. 创建promise对象
       resolve 是成功的时候, 需要调用的函数
       reject 是失败的时候, 需要调用的函数

       const p = new Promise(function(resolve, reject) {
          // 里面一般封装的是异步函数的处理
       })

    2. 使用promise对象
       p.then(成功的函数).catch(失败的函数)

*/

promise的三个状态

• pending: 等待 (进行中)
• fulfilled: 成功 (已完成), 调用了 resolve, promise的状态就会被标记成成功
• rejected: 失败 (拒绝), 调用了 reject, promise的状态就会被标记成失败
  小tips: promise的状态只能修改一次 一旦promise的状态发生变化, 状态就会被凝固
  利用promise解决回调嵌套的问题
  
  宏任务，微任务
  宏任务: 主代码块, 定时器都属于宏任务
  微任务: 当前宏任务执行完，在下一个宏任务开始之前需要执行的任务
  (promise就属于微任务, 在下一个宏任务开始前, 先执行)
  async-await
  async-await存在的意义就是解决回调嵌套的问题
  可以大大的提升 promise 在使用时的可读性！！！
  
  async会阻塞函数的执行，一直等到成功的结果！！！一个async 里面可以有多个await
  await等待的是promise resolve 的结果 并不能等待reject 的结果 如果失败了会报错直接抛出错误，所以需要try catch 一波
  try catch
  捕获错误的语法
  try catch 并不是一定要在async await里面使用，哪里都可以使用
  打印出错误信息 可以更好的理解错误 进行调试

try {
  // 尝试着去做的事情，执行的代码
} catch (err) {
  //打印，尽量不要写空，哪怕就是两个斜线
  
}

try和不try的错误显示区别


利用async和await对发送请求进行改造

axios.method(‘url’)