12.9问题_const {data:res}

• 解构赋值
  解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

应用场景：当请求一个接口，服务器返回数据，可以利用结构赋值来为data赋值为res，解构对象，重命名

代码：const { data: res } = await this.$http.post(“login”, this.loginForm);

• await,async解决了什么问题，和promise又有什么关系

应用场景：利用axios请求接口，会用到post,delete,put,get，方法，而这些方法会返回一个promise对象，然后可以调用then来执行成功的回调函数，还要再重新赋值。但是使用await，async关键字，可以直接获取到请求成功的数据

代码

 this.$refs.loginFormRefs.validate(async valid => {
        console.log(valid);
        if (!valid) return;
        const { data: res } = await this.$http.post("login", this.loginForm);
        console.log(res);
        if (res.meta.status != 200) return this.$message.error("登录失败");
        this.$message.success("登录成功");
1
2
3
4
5
6
7

这里你可能会好奇，说是axios发起请求，为什么没有见axios，而且接口就一个字段，都没有网址?
因为在全局，设置了axios的请求跟路径，并且将axios挂载到了vue原型上

// 导入axios
import axios from 'axios'
// 设置请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    // 设置请求拦截器，来为请求添加token
    // 需要授权的API， 必须在请求头中， 使用Authorization字段，提供token令牌==>权限认证
axios.interceptors.request.use(config => {
        console.log(config);
        // 为请求头对象， 添加token验证的Authorization
        config.headers.Authorization = window.sessionStorage.getItem('token')
        return config
    })
    // 将axios挂载到Vue的原型上，这样全局每一个vue组件就可以通过this.$http来调用axiox
Vue.prototype.$http = axios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• created 和mounted
  created：在模板渲染成html前调用，通常初始化某些属性值，然后再渲染成试图
  mounted：在模板渲染成html后调用，通常是初始化html页面后，再对html节点进行的操作
• 请求拦截器和响应拦截器
  请求拦截器

 // 设置请求拦截器，来为请求添加token
    // 需要授权的API， 必须在请求头中， 使用Authorization字段，提供token令牌==>权限认证
axios.interceptors.request.use(config => {
        console.log(config);
        // 为请求头对象， 添加token验证的Authorization
        config.headers.Authorization = window.sessionStorage.getItem('token')
        return config
    })
1
2
3
4
5
6
7
8