Vue之Axios异步通信详解

1、首先我们创建一个.json文件，作为交互使用，我们列举json数据格式模拟传递到前端来帮助小伙伴们理解。

{
  "name": "咸鱼_翻身",
  "url": "https://blog.csdn.net/aaa123_456aaa",
  "page": 1,
  "address": {
    "street": "湘桥区",
    "city": "潮州市",
    "country": "中国"
  },
  "links": [
    {
      "name": "咸鱼_翻身1",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    },
    {
      "name": "咸鱼_翻身2",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    },
    {
      "name": "咸鱼_翻身3",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    }
  ]
}

记得看一下自己的环境哦，这里要选支持ES6才行。

2、接下来我们创建一个.html文件，使用Axios异步通信，来实现数据通信。

    
    



    

        {{info.name}}
        {{info.address}}
    

运行结果：

3、当然上面是比较标准的写法，我们不妨简写一下：

    
    



    

        {{info.name}}
        {{info.address}}
    

运行结果：

4、我们对于url的交互要注意一下，因为这个要使用v-bind来绑定值。

    

        {{info.name}}
        {{info.address}}
        点击进入我的博客
    

点击将会跳转，有兴趣的小伙伴可以点个关注呀！

5、提示

有些朋友可能网络不好，你就会看见页面加载过程中会先加载一个模板，这与他Vue的生命周期有关：

有些小伙伴可能会觉得很丑，这里就提供一个解决方法，让他的那一瞬间变成白色，而不是先出现模板：

    
    
    




    

        {{info.name}}
        {{info.address}}
    

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!