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

最新推荐文章于 2024-10-14 19:10:07 发布

思旧人

最新推荐文章于 2024-10-14 19:10:07 发布

阅读量1k

点赞数 1

文章标签：前端 vue.js 前端框架 ajax

本文链接：https://blog.csdn.net/jiusiw/article/details/126437101

版权

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

摘要由CSDN通过智能技术生成

前后端数据的交互在工作中必不可少，这里提供一个 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，打印出接口中的数据