vue2.x 使用axios方法获取api接口中的数据并渲染到页面上，附api接口获取渠道

一、安装和引入axios

npm install axios -S

在main.js中引入

import Axios from 'axios'
Vue.prototype.axios = Axios    //全局注册，使用方法为:this.$axios

二、获取api接口数据

方法一

data() {
   
    return {
   
      dataapi: [],
    };
  },
  mounted: function () {
   
    var that = this;
    this.axios({
   
      methods: "get",
      headers: {
   
        ContentType: "application/json",
        "Access-Control-Allow-Origin": "*",
      },
      dataType: "json",
      ContentType: "application/json;charset-utf-8",
      url: "http://jsonplaceholder.typicode.com/posts",
      data: {
   },
    })
      .then(function (response) {
   
        // console.log(response);
        that.dataapi = response.data;
      })
      .catch(function (error) {
   
        console.log(error);
      });
  },

参考文章：https://www.jianshu.com/p/35b110e8fd88

方法二

语法：

// 文档提供的接口地址，请求成功时调用第一个回调函数，失败则调用第二个
axios.get('url地址'