vue + fetch的使用

最新推荐文章于 2023-06-19 14:49:13 发布

芳华汉服

最新推荐文章于 2023-06-19 14:49:13 发布

阅读量975

点赞数

分类专栏：前端个人笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42094345/article/details/128415294

版权

前端个人笔记专栏收录该内容

20 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <style>
    *{
      margin: 5px;
    }
  </style>
  <body>
    <div id="app">
      <div>
        <button @click="sendOkForGet">sendOk</button>
      </div>
      <div>
        <button @click="sendOkForPost">sendOkForPost</button>
      </div>
      <div>
        <button @click="getlist">getlist</button>
      </div>
      <hr/>
      <div>
        <ul v-show="datalist">
          <li v-for="item in datalist" :key="item.id">
            <div>编码：{{item.id}}</div>
            <div>姓名：{{item.name}}</div>
            <div>年龄：{{item.age}} 岁</div>
            <div>城市：{{item.city}}</div>
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    var appElement = {
      data() {
        return {
          datalist: [],
        };
      },
      methods: {
        sendOkForGet() {
          // 请求
          fetch("http://127.0.0.1:8080/ok/")
            // .then((result) => {
            //   console.log(result);
            //   // Response {type: 'cors', url: 'http://127.0.0.1:8080/ok/', redirected: false, status: 200, ok: true, …}body: （…）bodyUsed: falseheaders: Headers[[Prototype]]: Headersok: trueredirected: falsestatus: 200statusText: ""type: "cors"url: "http://127.0.0.1:8080/ok/"[[Prototype]]: Response
            //   // 这里没有真正的数据，只有状态码，响应头之类的

            //   return result.json();
            // })
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
              alert(JSON.stringify(res));
            });
        },
        sendOkForPost() {
          console.log("sendOkForPost");
          // 定义一个对象作为请求参数
          var param = {
            name: "zhaopq",
            age: "18",
            city: "beijing",
          };
          fetch("http://localhost:8080/okPost", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(param),
          })
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
              alert(JSON.stringify(res));
            });
        },

        getlist() {
          console.log("sendOkForPost");
          // 定义一个对象作为请求参数
          var param = {
            name: "zhaopq",
            age: "18",
            city: "beijing",
          };
          fetch("http://localhost:8080/list", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(param),
          })
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
              this.datalist = res.data;
            });
        },
      },
    };
    const app = Vue.createApp(appElement).mount("#app");
  </script>
</html>