12.9问题

偏执的太偏执、 2021-08-13 16:42 303阅读 0赞

*  解构赋值  
    解构赋值语法是一种 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("登录成功");

这里你可能会好奇，说是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

*  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
        })