Vue通过axios调用json地址数据的方法

npm install axios --save

// main.js 或者其他初始化文件
import Vue from 'vue';
import axios from 'axios';

Vue.prototype.$http = axios;

<template>
  <div>
    <h2>Data from API:</h2>
    <ul v-if="data">
      <li v-for="(item, index) in data" :key="index">{{ item.title }}</li>
    </ul>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    fetchData() {
      this.$http.get('https://api.example.com/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error("Error fetching data:", error);
        });
    }
  }
};
</script>

methods: {
  fetchData() {
    this.$http.get('https://api.example.com/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        if (error.response) {
          // 请求已发出，但是不在2xx的范围
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // 已经完成了请求，但没有收到响应
          console.log(error.request);
        } else {
          // 发送请求时出了点问题
          console.log('Error', error.message);
        }
        console.log(error.config);
      });
  }
}

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

export default instance;

import axios from './axios-instance';

export default {
  methods: {
    fetchData() {
      axios.get('/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error("Error fetching data:", error);
        });
    }
  }
};