实习随笔-9、实现先获取链接再执行跳转

序言：

本次需要实现的功能是从接口拿到返回的图片url，然后通过点击跳转到新页面进行预览。

初步想法：从接口拿到url，直接动态赋值给a标签的href，例如

<a  :href='imageUrl' @click=viewTemplate(id) target="_blank" >预览</a>

viewTemplate(id){
	let _this=this;
	ajax.getForm({
      url:`/v1/consultant/templates/${id}/pictures.do`
  }).then(res=>{
    if(res.code==200){
      console.log(res);
      _this.imageUrl=res.imageUrl
    }
  }).catch(err=>{
    return err
  })
}

但这样就出现了问题就是，当点击a标签时，还没来得及发请求，页面就跳转了或者点击a标签，链接还没赋值到imageUrl上，页面就跳转了，需要点击第二次才能预览图片

解决思路：

1、这是不是跟异步有关系，为防止是异步的原因，我们采取async/await来解决
2、我们需要等到请求–>服务器响应参数–>赋值接口中的url到imageUrl这一系列操作结束后，再进行跳转

实现：

1、先解决可能存在的异步问题

 async viewTemplate(id){
      let _this=this;
      // console.log(this.$api.TempApi.getPic(id),'!!!!!!!!!!'); 
      //解决可能存在的异步问题
      const res = await this.$api.TempApi.getPic(id).then(res=>{
        console.log(res,'!!!!!!!!!!!!');
        return _this.imageUrl=res
        
      })
      window.open(_this.imageUrl) //等一系列操作完成后，再跳转页面
      }

为更好管理接口，我将接口封装到了一个接口文件中

function getPic(id){
  return ajax.getForm({
      url:`/v1/consultant/templates/${id}/pictures.do`
  }).then(res=>{
    if(res.code==200){
      console.log(res);
      return res.result[0].imageUrl
    }
  }).catch(err=>{
    return err
  })
}

博客记录代码，代码记录生活，一切都是为了改BUG