关于promise的一些心得与体会

关于promise的一些心得与体会：

在日常开发中，或多或少的均会用到异步执行，起初我对异步这个概念的体会并没有那么深，挺模糊的，用的做多的也就是和后端进行交互，但是在开发一款标注工具的时候，才真正意义的体会到了对异步执行的需求。何谓异步？何谓同步？同步好理解，举个简单的例子，在做饭的时候，我既可以听音乐，又可以做饭，两件事情在共同执行，异步呢，比如炒菜，我必须先将菜洗好，然后才可以去炒，这种先后关系就是异步，同步在js中很常见，我想写一些自己的心得体会。

function a1 () {
  console.log('111')
  console.log('123')
 }
 a1()

函数a1内部的这两行代码之间的关系就是属于同步，没有明确的先后关系

但是现在我提了一个新需求，就是我要严格意义上的先输出123，再输出111，这就涉及到了异步，采用了异步之后，就可以对代码的执行先后有个很明确的规定，这里大家在看之前要对promise对象有个了解

var a = function a2 () {
  return new Promise (() => {
  	console.log('123')
  })
}
a().then(() => {
  console.log('111')
})

以上是一个简单的promise的使用，平时使用可能还涉及到resolve和reject，resolve我将其理解为给后一个函数穿参数的这么一个作用

var a3 = function fn5 () {
  return new Promise ((resolve) => {
    console.log('洗菜')
    resolve('菜品')
  })
}
a3().then((vegetable) => {
	console.log('我要开始炒'+vegetable)
})

其实resolve的作用我自己理解就是加入异步执行的两个函数之间参数有关联，那么就可以通过resolve来传递，第二个函数进行接受

在开发标注工具的过程中，我再使用promise的时候比较多，但是还没有用过async和await，异步重度使用者就会发现这样使用原生的就有点麻烦，要不断的去定义，代码看着不好看，我也在想自己去封装一个promise函数，这样存在异步关系的两个函数，我直接进行传参就可以了，但是接触到了async和await，async是一个修饰符，这个修饰符有什么作用，它的用处就是你将async放到一个

函数前面，这个函数身上就带有promise属性了，上代码：

var w1 = async function () {
	console.log('9999')
}
w1().then(() => {
	console.log('000')
})

async的简便性你看到了么？要是你使用promise的话还得return new promise什么的，这样写好简单啊，太舒服了，那么await又有什么用呢？在网上查询别人的博客，await的使用有这么个限制条件，就是必须得放在aync修饰的函数体中，await可以用来修饰promise，拿到resolve和reject中的参数，并且在拿到之后才会之行它后边的代码，这句话很重要。比如在和后端进行交互的时候，

created () {
    getAchives().then((res) => {
      console.log(res.data.archives)
      this.totalCount = res.data.archives.length
      this.archiveList = res.data.archives
      this.selection = res.data.archives.map(obj => {return obj.key})
    })
    getPaginationList(1,this.pageSize).then((res) => {
      console.log(res)
      this.tableData = res.data.archives
    })
  },

这是我经常使用的方式，而有了async和await之后，还可以这样用，以下代码是用的别人的，但是我觉得和后台交互这块还体现不出async和await的优越性，后续在工作中我会着重使用这种，再有心得体会再更。

export default {
  name: 'Historys',
  data() {
    return { 
      totalData: 0,  
      tableData: []
    }
  },
  created () {
    this.getHistoryData()
  },
  methods: { 
    handleClick (tab) {
      let data = {
        status: tab.name,
        name: this.formInline.user,
        cid: this.formInline.identity,
        start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
        end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
      }
      this.getHistoryData()
    },
    // 统一处理axios请求
    async getHistoryData (data) {
      try {
        let res = await axios.get('/api/survey/list/', {
          params: data
        })
        this.tableData = res.data.result
        this.totalData = res.data.count
      } catch (err) {
        console.log(err)
        alert('请求出错！')
      }
    }
  }
}