axios返回header无法获取所有数据的问题 & vue数据无法实时更新问题

axios返回header无法获取所有数据的问题

背景

1. 前端请求是vue-cli的axios封装的请求。2.业务场景是下载一个excel文件，接口返回二进制流的格式。 3.有个个性化的数据需要在前端展示，和后端开发约定好，后端把它放到了header里面，但是axios的res.header并不能获取

原因

• 前端只能获取特定的请求头的参数，接口自定义的参数前端想在请求头获得，后端还需要多写一个步骤

解决

• 后端仅仅setHeader是不够的，这样前端的axios依然无法获得header里的特定参数

axios.interceptors.response.use(response => {
   const successAndFail = response.headers['successandfail']
  //结果是undefined
})

• java代码还需要对Access-Control-Expose-Headers这个头属性进行设置，这样相关接口，前端通过axios请求的response.header里可以获取到相关参数

  
  
  

  QQ图片20190726173936.png

总结

• 要对http协议有所了解
• 工作中要和后端开发积极沟通，有时候不一定是前端的问题。

vue数据无法实时更新问题

背景

1. vue-cli脚手架下的.vue文件 2. 需要实时变化的变量不是提前在data( return { })里声明好的，是请求某接口后再动态生成的全局变量。这些变量整体放在一个对象里，key是动态id,value先默认为空数组let obj = { 1: [] , 2: [], 3: [] ...}。4.在method定义的方法里改变这些动态值，在方法里值是被改变了，但是在template里数据没有实时更新过来

//html


//js

原因

• 创建的动态变量是一个对象。在方法里改变这个对象某一个属性的值，而不是改变这个变量，实际上此变量指向的空间值没有改变。堆空间值还是同一个指向，所以template里无法实时更新对象里动态属性的值的更新

解决

• 换一种思路实现，提前把数据准备好来，通过计算属性，实时更新

//html


//js

总结

• 代码逻辑中用到动态引用类型的变量时， template中不要 this.obj[xx]这样的取值，就算在方法对this.obj[xx]值更新了，template也无法实时更新。要定义一个新的变量let list = this.obj[xx]，template里监听list变量