vue3 Composition API 学习手册-30 实战API练习

前面文章提到许多前、後端分离的开发方式，也模拟过很多次资料来自於外部（json）的开发，今天跟大家介绍一个网站，能让我们真正模拟网页资料来自於後端工程师所提供API的方法，网址是：https://reqres.in/

相信在网页设计道路上这种前、後端分离将会是未来永久的趋势，透过API进行沟通是每个前端工程师都必须了解的，而透过这个网站就能模拟练习跟API拿资料的方法，例如透过axios打到下面这个网址：

https://reqres.in/api/user

就可以获得这样的一个json

{
    "page": 1,
    "per_page": 6,
    "total": 12,
    "total_pages": 2,
    "data": [{
            "id": 1,
            "name": "cerulean",
            "year": 2000,
            "color": "#98B2D1",
            "pantone_value": "15-4020"
        },
        {
            "id": 2,
            "name": "fuchsia rose",
            "year": 2001,
            "color": "#C74375",
            "pantone_value": "17-2031"
        },
        {
            "id": 3,
            "name": "true red",
            "year": 2002,
            "color": "#BF1932",
            "pantone_value": "19-1664"
        },
        {
            "id": 4,
            "name": "aqua sky",
            "year": 2003,
            "color": "#7BC4C4",
            "pantone_value": "14-4811"
        },
        {
            "id": 5,
            "name": "tigerlily",
            "year": 2004,
            "color": "#E2583E",
            "pantone_value": "17-1456"
        },
        {
            "id": 6,
            "name": "blue turquoise",
            "year": 2005,
            "color": "#53B0AE",
            "pantone_value": "15-5217"
        }
    ],
    "ad": {
        "company": "StatusCode Weekly",
        "url": "http://statuscode.org/",
        "text": "A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things."
    }
}

而透过下面这样的打法，就可以拿到第二页的资料

https://reqres.in/api/user?page=2

另外也可以透过axios来练习看看送出资料（post）的部分

function axiosPost(){
  axios.post("https://reqres.in/api/users", { "name": "morpheus", "job": "leader" }).then(function (response) {
      console.log(response);
  }).catch(function (response) {
      console.log(response);
  })
}

这可以让我们模拟练习新增资料的部分，而若是在打出去的时候带个delay的参数：

function axiosPost(){
  axios.post("https://reqres.in/api/users?delay=2", { "name": "morpheus", "job": "leader" }).then(function (response) {
      console.log(response);
  }).catch(function (response) {
      console.log(response);
  })
}

这样就可以让我们在两秒之後才会收到服务器回应，可以让我们练习在打出API的时候，有可能会需要做的进度条或是画面遮罩。

总之学海无涯回头唯勤是岸，希望大家可以透过这个网站去练习vue 3在开发上各种的可能！