[每天一课] 今天就讲一讲关于vue-cli 脚手架里 如何调用API

既然vue-resource停更了，就不讲了，但是效果也是差不多了

 

今天主要讲一下关于axios的方式来调用API，按照vue-cli的模式，这个当然得先引入一个axios这个模块了。那当然得走一遍终端安装了

 

terminal >>  npm install axios

//以上运行完毕，那么走一波在项目里引入模块了。当然少不了main.js这个文件了

 

main.js >> import axios from 'axios'

//这个引入方便是比较方便快捷的，但是如果会涉及到关于axios的可配置性的话，就是加强axios的延展性，那么最好的方便就是将这个独立成一个可配置的模块具体如何操作呢

 

./ create js file >> axios.config.js

//在根目录里创建axios.config.js这个文件模块，然后把他，忘记具体名词怎么形容了，好像是爆什么出来，反正就是将他 export 到 default 的某个东东。

<file>

  import axios from 'axios'

//做成模块化，那么肯定也要引入axios的模块了。这里只是将他做成一个可配置的东东。

 

const instance = axios.create({

baseURL:'/api'

})

//其实这个很好理解的，声明instance这个东东，然后将axios.create就相当于将axios创建的东东，全部赋给这个叫做instance的东西。当然里面的内容是属于配置的了baseURL很好理解

 

export default instance

//这个就是曝出去，给大伙使用了。

</file>

 

--> 关于模块的安装，引用，独立配置，以上大致如此，后续根据自己的需求再做优化与升级

 

接下来，看一下axios在vue-cli里是如何使用的。其实也很简单，引入，调用。

 

myblog.vue >> 

export default {

  data () {

    return {

      blogs:[],  //咱们要声名个容器，用来装API的数据的，这个blogs就是容器

   };

  },

  created () {

     axios.get("http://jsonplaceholder.typicode.com/posts")  //咱们暂时从jsonplaceholder里直接用别人做好的API接口来拉点数据先用用

     //这样我们就get到以上这个链接的数据了。当然接下来就是获取他上面的数据了

    .then(data=> { return data.data;}) //这里用到的箭头函数，至于具体的箭头函数如何，可以自行BB，至少能少写function......

    .then(data=> {

          var blogsArray = [];

          for (let key in data) {

            data[key].id = key;

            blogsArray.push(data[key]);

          }

          this.blogs = blogsArray;

          console.log(this.blogs);  //这个只是测试数据是否成功输出，在chrome里就能查看数据是否正常读取

     });

  }

}