vue2项目：快速创建vue页面模板+aixos和Message的挂载+async与await的异步操作

今天继续写一下关于vue项目中所写的东西

1.vue页面的模板快速创建

新建一个模板之后输入vue然后点击回车就可以直接出现模板了

 这种快捷键创建模板怎么弄？

你只需要在vscode上安装一个插件就好，我的是vue2项目安装了一个vue2 snippets

2. aixos和Message的挂载

 在写vue项目的时候经常要发起axios请求还有就是那个提示框请求失败和成功的信息框

所以可以这样写一层axios封装

//在main.js中
//导入网络请求的包
import axios from 'axios'
//配置请求的根路径，这样子就都有网址的请求路径就都会加这一个固定的前缀减少输入
axios.defaults.baseURL='http://网络地址:端口号/后缀'
// 把axios这个包挂载到原型对象上
// 添加到vue.prototype.$http后,可以在每一个组件上通过
// this.$http获取axios 不必每个页面都import  axios   $http是自定义的属性名,可以随便起
Vue.prototype.$http=axios

this.$http.get('路径' + 参数)

消息提示框是用的element ui

所以就是这样子

import  Message from 'element-ui'
//挂载消息提示组件到原型中，这样子就方便用this调用
Vue.prototype.$message=Message

然后在页面里面调用的时候就是这样子写

this.$message.error('失败提示文字')

this.$message.success('成功提示文字')

3.async与await的异步操作

首先介绍一下这个是什么

async和await是JavaScript中处理异步操作的语法糖，它们使得异步代码的编写和阅读更加简洁和直观。

async函数：async函数是一个特殊类型的函数，它内部包含异步操作。通过在函数声明前加上async关键字，函数就变成了一个async函数。在async函数中，可以使用await关键字来暂停函数的执行，等待异步操作的结果。

await表达式：await只能在async函数内部使用。它用于暂停async函数的执行，等待一个Promise对象的解析结果。当遇到await表达式时，函数会暂停执行，直到Promise对象被解析为成功状态并返回结果，然后将该结果赋给变量。这使得在异步操作返回结果之前，代码可以按照同步的方式编写。

这里就额外扩展一下异步编程：

JavaScript 中的异步机制可以分为以下几种：
回调函数 的方式，使用回调函数的方式有一个缺点是，多个回调函
数嵌套的时候会造成回调函数地狱，上下两层的回调函数间的代码耦
合度太高，不利于代码的可维护。
Promise 的方式，使用 Promise 的方式可以将嵌套的回调函数作为
链式调用。但是使用这种方法，有时会造成多个 then 的链式调用，
可能会造成代码的语义不够明确。
generator 的方式，它可以在函数的执行过程中，将函数的执行权转
移出去，在函数外部还可以将执行权转移回来。当遇到异步函数执行
的时候，将函数执行权转移出去，当异步函数执行完毕时再将执行权
给转移回来。因此在 generator 内部对于异步操作的方式，可以以
同步的顺序来书写。使用这种方式需要考虑的问题是何时将函数的控
制权转移回来，因此需要有一个自动执行 generator 的机制，比如
说 co 模块等方式来实现 generator 的自动执行。
async 函数 的方式，async 函数是 generator 和 promise 实现的
一个自动执行的语法糖，它内部自带执行器，当函数内部执行到一个
await 语句的时候，如果语句返回一个 promise 对象，那么函数将
会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此
可以将异步逻辑，转化为同步的顺序来书写，并且这个函数可以自动
执行

我个人觉得async函数是用的最舒服的

接下来就是展示用法结合aixos和message

    // 展示编辑用户的对话框
    async showEditDialog(id) {
      // console.log(id);
      const { data: res } = await this.$http.get('users/' + id)
      if (res.meta.status !== 200)
        return this.$message.error('查询用户信息失败！')
      this.editForm = res.data
      this.editDialogVisible = true
    },

这里是一个展示编辑用户对话框的请求

async的操作会返回一个promise所以需要用到const { data: res }去解构赋值

然后验证服务器返回状态码是否合格不然就弹出错误消息提示

然后就将数据赋值到本页面的data return的一个值进行保存然后去进行使用

再显示对话框

4.额外再说解构赋值的意思

解构赋值是一种从数组或对象中提取值并将其赋给变量的语法。在这个例子中，使用了对象解构赋值，通过{ data: res }的语法，将响应对象的data属性的值赋给res变量。

下面是解构赋值的一些特点和语法：

1. 解构赋值可以用于数组和对象。在这个例子中，使用的是对象解构赋值。

2. 解构赋值通过{}中指定的模式来匹配对象的结构，并将对应的属性值赋给变量。

3. 变量的名称可以与属性名不同，通过使用冒号:来指定新的变量名。在这个例子中，属性名为data，而变量名为res。

4. 解构赋值可以嵌套使用，以便提取更深层次的属性值。

在这段代码中，解构赋值的目的是从HTTP响应中获取res.data的值，并将其赋给res变量。然后根据res.meta.status的值进行条件判断和后续操作。

请注意，这里的解构赋值是通过const { data: res }来实现的，其中const是用于声明常量的关键字。这表示res是一个常量，一旦赋值就不能再修改它的值。