- 解构赋值
解构赋值语法是一种 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
})