Vue 中数据交互 fetch 的基础实例（入门）

最新推荐文章于 2025-10-07 01:18:30 发布

原创最新推荐文章于 2025-10-07 01:18:30 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #前端框架 #ajax

本文通过一个vue2的实例展示了如何利用fetch API从服务器获取并处理JSON数据。详细解释了fetch的基本用法，包括发送请求、处理响应头及转换响应数据。点击按钮即可触发数据获取，并在控制台打印出接口返回的数据。

前后端数据的交互在工作中必不可少，这里提供一个 fetch 的响应测试的实例

用法：fetch() 接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象。它的基本用法如下。

基本语法如下：
fetch(url)
  .then(...)
  .catch(...)


//下面是一个例子，从服务器获取 JSON 数据。

fetch('http://www.pudge.wang:3080/api/rated/list')
      //fetch方法：用来快速获取json格式数据(详情见底下)
      // 第一个 then 接受到的是请求头的相关信息
  .then(response => response.json())
	  //第二个.then拿到的是从后端请求回来的真正的数据
	  //想要获取响应数据，需在第一个then中将响应数据转为json再返回给第二个then，在第二个then中去获取值
  .then(json => console.log(json))
      // 请求错误时执行
  .catch(err => console.log('Request Failed', err));

基础实例（vue2中）：

提供一个可用的接口：http://www.pudge.wang:3080/api/rated/list

<template>
  <div>
    <h2>这是 fetch 的页面</h2>
    <button @click="handleClick()">btn</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClick() {
      fetch("http://www.pudge.wang:3080/api/rated/list")
        // 第一个 then 接受到的是请求头的相关信息
        .then((res) => {
          // console.log(res); //拿到的是一个状态码
          //用json格式读出来，也可以改为text，得到的就是一个text字符串，但是要做一个json解析，所以极少用text格式
          return res.json();
        })
        //第二个.then拿到的是从后端请求回来的真正的数据
        //想要获取响应数据，需在第一个then中将响应数据转为json再返回给第二个then，在第二个then中去获取值
        .then((res) => {
          console.log(res);
        })
        // 请求错误时执行
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

效果：
点击按钮 btn，打印出接口中的数据