JS深入/ Promise与Async和Axios的关系解析

目录

一、 写一个promise

二、 promise和axios关系解析

三、promise和async的关系解析

四、async和await解析

现在通过实例来进行循序渐进的讲解更容易理解

一、 写一个promise

let p = new Promise(() =>{
  console. log(1)
})

调用promise的then的方法

p. then(() =>{
  console. log(2)
})

你会发现只能输出1，不能输出2，你会注意到必须加上resolve方法2才会被输出，也就是下面的代码

let p = new Promise((resolve) =>{
  console. log(1)
  resolve()
})

p.then(() =>{
  console. log(2)
})

这个时候才会输出1和2

需要记住一个结论: promise有then方法，但是then方法的执行必须通过promise方法通过resolve函数来执行，这个结论对接下来的分析很重要

二、 promise和axios关系解析

现在写一个axios，写一个get方法

axios. get(‘’). then((res) =>{
  console. log(res)
})

1.1中知道了promise有then方法，现在axios. get()调用了then，对比就可以知道，axios. get()它返回的就是一个promise对象，

它的原理就是:  它会把获取到的远程数据通过resolve给传出来，然后在通过then方法拿到数据，这个就是axios的基础原理知识

三、promise和async的关系解析

写一个简单的async

async function fun(){
  return 1
}

let a = fun()

console. log(a) // Promise  {<fulfilled>: 1}

你会发现输出的是promise对象，也就是说async返回的是promise对象，普通函数return 1返回的就是数字1，async函数return 1返回的就是promise对象

那么现在你思考你下，怎么能从async返回值中拿到1呐？

上面说了一个重要结论，promise有then方法，然后async返回的是promise方法，所以async肯定也有then方法

async function fun(){
  return 1
}

fun(). then((data) => {
  console. log(data) // 1
})

所以你可以理解: async函数就是promise函数的简写

把它换成promise的写法就是

function fun() {
  return  new Promise((resolve) =>{
    resolve(1)
  })
}

fun(). then((data) =>{
  console. log(data)
})

所以你就知道下面这两个函数是执行同样的功能

async function fun(){
  return 1
}

function fun(){
  return new Promise((resolve)=>{
    resolve(1)
  })
}

四、async和await解析

4.4.1先来看一个例子

let p1 = new Promise((resolve) =>{
  resolve(1)
})

let p2 = new Promise((resolve) =>{
  resolve(2)
})

现在思考一个问题，对于上面输入的1和2，思考一下怎么拿到，通过then肯定可以拿到，因为Promise对象有then方法

p1.then((data)=>{
  console.log(data) // 1
})

p2.then((data)=>{
  console.log(data) // 2
})

上面可以输出1，2，那现在使用async简写的方法怎么处理呐？

处理方法如下：

let p1 = new Promise((resolve) =>{
  resolve(1)
})

let p2 = new Promise((resolve) =>{
  resolve(2)
})

async function name(){
  let a = await p1
  let b = await p2
  console.log(a) // 1
  console.log(b) // 2
}
name()

也就是说，a等于await加一个promise对象，就能拿到resolve中的值，这样使异步的代码写起来更像是同步的代码

6.4.2：结合6.4.1的例子，现在看一下下面这个例子，看一下输入结果

async function fu1(){
  console.log(50)
  let data = await fu2() // 相当于promise中的回调，then之前的方法，这一步是同步，所以会先输出200，之后会输出100
  console.log(data)
}

async function fu2(){
  console.log(200)
  return 100
}

fu1()

所以输出结果：50、200、100