promise和axios一起用（2）

昨天的那篇博客就把promise的基本用法写进去了，说实在，我也不知道咋和axios一起用，今天，终于用promise把想要的数据渲染到页面上了。本来以为使用promise之后会用art-template把数据渲染上去，谁知道我最后还是用的${}渲染的。
这是在router里面把后端接口改了一下：

router.get('/index/skyrocketVideo', function (req, res) {
    axios({
        url: "video/index/skyrocketVideo",//(前边还有端口号，用了一个方法，省略没写，见下边)
        method: "GET",
    })
    .then(function (data){
        res.status(200).json({ 
            data: data.data,
        })
    })
    .catch(function (error) {
        res.status(500).json({
            message:'错误'
        })
    })
})

然后在自己的js里面用：

function show(){
  // 返回一个promise对象
  return new Promise((resolve, reject) => {
    axios({
      url: '/index/skyrocketVideo',
      method: 'get',
    })
    .then((res) => { 
      resolve(res.data.data.data);
    })
    .catch(function (error) {
      reject(error);
    });
  });
}
async function hello(){
  let a=await show();//调用上边的函数
  var trl=document.getElementsByClassName('trl-ul')[2];
  for(var i=0;i<5;i++){
    trl.innerHTML+=`
      <li class="trl-item">
          <a class="rank-list" href='/play?${a[i].videoId}'>
              <div class='rank-num'>${i+1}</div>
              <div class="rank-content">
                  <span class='rush'>${a[i].videoName}</span>
                  <p style="color:hsla(0,0%,100%,.4);overflow: hidden;white-space:nowrap;text-overflow: ellipsis;font-size: 13px;">${a[i].introduction}</p>
              </div>
          </a>
      </li>

    `
  }
  var h=document.getElementsByClassName('rank-num');
  console.log(h.length)
}
hello();

就这样把数据弄上去了，但是我还想使用art-template实现，不知道行不行，我要去再探索探索。

学长说，优化代码，优化代码，我一直在想，只要能实现就好了，今天才知道，才知道，原来，原来优化一下可以省多少事，就说这个端口号的问题，axios.defaults.baseURL ='http://42.194.158.211:8080/';只需要在app.js里面加上这句话，就可以让在router里面修改后端接口的时候不用写，原来别人都知道，只有自己不知道，我们所有的修改接口都写了端口号，学长说，要是换端口号怎么办，把所有代码都翻翻找找吗？可能没有改过端口号，就从来不知道这样有多么的省事，如果这样写，只要修改端口号，只用把这一句话修改一下就行了，其他就不用动，如果按照我以前的，那真是费时啊。
我们都在不断成长，也要不断的优化代码，不要总是固执己见的去按照自己的想法，真的要去交流交流，要不人家已经用的炉火纯青了，自己还在傻傻的用着上个世纪的用法。