vue如何拿到json

Vue.js 中获取 JSON 数据的几种常用方法详解**

在 Vue.js 开发中，与后端进行数据交互是必不可少的环节，而 JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用于前后端数据传输，在 Vue 中如何获取 JSON 数据是开发者的基本功，本文将详细介绍几种在 Vue.js 中获取 JSON 数据的常用方法。

使用 axios 库（推荐）

axios 是一个基于 Promise 的 HTTP 客户端，浏览器和 Node.js 都可以使用它，它功能强大，支持请求和响应拦截、自动转换 JSON 数据、取消请求等，是目前 Vue.js 项目中最常用的 HTTP 请求库。

安装 axios

你需要通过 npm 或 yarn 安装 axios：

npm install axios
# 或
yarn add axios

在组件中使用 axios

安装完成后,你可以在 Vue 组件中导入并使用 axios 来发送 GET 请求获取 JSON 数据。

示例：

<template>
  <div>
    <h1>用户列表</h1>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'UserList',
  data() {
    return {
      users: [], // 存储获取到的用户数据
      loading: false, // 加载状态
      error: null // 错误信息
    };
  },
  created() {
    // 在组件创建后获取数据
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      this.loading = true;
      this.error = null;
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        // axios 会自动将响应体解析为 JSON 对象
        this.users = response.data;
      } catch (err) {
        this.error = '获取用户数据失败: ' + err.message;
        console.error('Error fetching users:', err);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

说明：

axios.get(url)：发送 GET 请求到指定的 URL。
await：等待 Promise 完成（即服务器响应）。
response.data：服务器返回的 JSON 数据会自动解析并放在 response.data 属性中。
try...catch...finally：用于处理请求成功、失败以及最终执行的操作（如关闭加载状态）。

使用浏览器内置的 Fetch API

Fetch API 是现代浏览器内置的一个用于获取资源的接口，它也返回 Promise，无需额外安装库。

示例：

<template>
  <div>
    <h1>文章列表</h1>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>
      <div v-for="post in posts" :key="post.id">
        <h3>{{ post.title }}</h3>
        <p>{{ post.body }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PostList',
  data() {
    return {
      posts: [],
      loading: false,
      error: null
    };
  },
  created() {
    this.fetchPosts();
  },
  methods: {
    async fetchPosts() {
      this.loading = true;
      this.error = null;
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        // 使用 .json() 方法解析响应体为 JSON 对象
        const data = await response.json();
        this.posts = data;
      } catch (err) {
        this.error = '获取文章数据失败: ' + err.message;
        console.error('Error fetching posts:', err);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

说明：

fetch(url)：发送请求，返回一个 Promise。
response.ok：检查响应的状态码是否在 200-299 的范围内。
response.json()：这是一个异步方法，用于读取并解析响应体为 JSON 对象，注意，它也返回一个 Promise。

从静态 JSON 文件获取数据

在某些场景下,你可能需要从项目内的静态 JSON 文件中读取数据，例如一些配置信息或模拟数据。

准备 JSON 文件

假设在 src/data 目录下有一个 config.json 文件：

{
  "appName": "My Vue App",
  "version": "1.0.0",
  "apiBaseUrl": "https://api.example.com"
}

在组件中导入 JSON 文件

Vue CLI 项目支持直接导入 JSON 文件，Webpack 会将其解析为 JavaScript 对象。

示例：

<template>
  <div>
    <h1>应用配置</h1>
    <p>应用名称: {{ config.appName }}</p>
    <p>版本: {{ config.version }}</p>
    <p>API 基础URL: {{ config.apiBaseUrl }}</p>
  </div>
</template>
<script>
// 直接导入 JSON 文件
import config from '@/data/config.json'; // 根据你的实际路径调整
export default {
  name: 'AppConfig',
  data() {
    return {
      config: config // 或者直接在模板中使用 config.appName，但通常我们会将其复制到 data 中以便管理
    };
  }
};
</script>

说明：

这种方式适用于开发阶段或小型项目的静态数据加载。
对于生产环境,JSON 文件较大，需要注意构建包的大小。

在 Vue CLI 项目中配置代理（解决跨域问题）

在开发过程中,如果你直接请求不同域名的 API（https://api.example.com/data），很可能会遇到跨域资源共享（CORS）问题，Vue CLI 提供了代理配置来解决这一问题。

配置 vue.config.js

在项目根目录下创建或修改 vue.config.js 文件：

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 以 '/api' 开头的请求会被代理
        target: 'https://jsonplaceholder.typicode.com', // 目标服务器地址
        changeOrigin: true, // 是否改变请求头中的 origin
        pathRewrite: {
          '^/api': '' // 重写路径，/api/users -> https://jsonplaceholder.typicode.com/users
        }
      }
    }
  }
};

在组件中请求代理后的接口

你可以在组件中通过 /api 前缀来请求目标 API，Vue CLI 开发服务器会自动将其代理到目标地址，从而避免跨域问题。

示例：

// 使用 axios
const response = await axios.get('/api/users'); // 实际请求 https://jsonplaceholder.typicode.com/users
// 使用 fetch
const response = await fetch('/api/posts'); // 实际请求 https://jsonplaceholder.typicode.com/posts

在 Vue.js 中获取 JSON 数据主要有以下几种方式：