Pulse Of The Blogosphere » RESTful API

HOME / Other / Framework / RESTful API – 1. Cơ bản

RESTful API – 1. Cơ bản

Author: admin - Posted: 09/06/21 - Update: 12/08/22

1. Các phương thức cơ bản

Methods	URLs	Actions
GET	/products	findAll()
GET	/products?categoryID=123&page=1
GET	/products/:id	findByID() findOne()
POST	/products/add	addOne()
PATCH	/products/update/:id	updateOne()
PATCH	/products/remove/:id	removeOne()
PATCH	/products/restore/:id	restoreOne()
PATCH	/products/removeList	removeList()
PATCH	/products/restoreList	restoreList()
PUT	/products/replace	replaceOne()
DELETE	/products/destroy/:id	destroyOne()
DELETE	/products/destroyList	destroyList()

2. Demo Fetch

<!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>Resful API</title>
</head>

<body>
    <div>
        <button onclick="getAPI()">Get Users</button>
        <button onclick="postAPI()">Post Login</button>
        <button onclick="putAPI()">Put User</button>
        <button onclick="patchAPI()">Patch User</button>
        <button onclick="deleteAPI()">Delete User</button> <br>

        <button onclick="postAPI2()">Post Login 2</button>
    </div>

    <script>
        const getAPI = async () => {
            try {
                let url = 'https://reqres.in/api/users?page=2';
                let response = await fetch(url);
                console.log(response);
                let responseJSON = await response.json();
                console.log(responseJSON);
            } catch (error) {
                console.log('Failed to fetch data !!!', error.message);
            }
        }

        const postAPI = async () => {
            try {
                let config = {
                    method: 'POST',
                    body: JSON.stringify({ email: "eve.holt@reqres.in", password: "cityslicka", }),
                    headers: {
                        'Content-Type': 'application/json',
                    },
                }
                let url = 'https://reqres.in/api/login';
                let response = await fetch(url, config);
                console.log(response);
                let responseJSON = await response.json();
                console.log(responseJSON);
            } catch (error) {
                console.log('Failed to fetch data !!!', error.message);
            }
        }

        const postAPI2 = async () => {
            try {
                let url = "https://learn-api.jmaster.io:8443/api/login";
                let config = {
                    method: 'POST',
                    headers: new Headers({
                        'Content-Type': "application/x-www-form-urlencoded",
                        'Cookie': "JSESSIONID=B41705BC2C08E0B2A4CF1338348333CE",
                    }),
                    body: new URLSearchParams({
                        'username': '0123456789',
                        'password': '123456',
                    }),
                    redirect: 'follow'
                };
                let response = await fetch(url, config);
                console.log(response);
                let responseJSON = await response.json();
                console.log(responseJSON);
            } catch (error) {
                console.log('Failed to fetch data !!!', error.message);
            }
        }

        const putAPI = async () => {
            try {
                let config = {
                    method: 'PUT',
                    body: JSON.stringify({ name: "James", job: "Student", }),
                    headers: {
                        'Content-Type': 'application/json',
                    },
                }
                let url = 'https://reqres.in/api/users/2';
                let response = await fetch(url, config);
                console.log(response);
                let responseJSON = await response.json();
                console.log(responseJSON);
            } catch (error) {
                console.log('Failed to fetch data !!!', error.message);
            }
        }

        const patchAPI = async () => {
            try {
                let config = {
                    method: 'PUT',
                    body: JSON.stringify({ name: "Robert", job: "Farming", }),
                    headers: {
                        'Content-Type': 'application/json',
                    },
                }
                let url = 'https://reqres.in/api/users/2';
                let response = await fetch(url, config);
                console.log(response);
                let responseJSON = await response.json();
                console.log(responseJSON);
            } catch (error) {
                console.log('Failed to fetch data !!!', error.message);
            }
        }

        const deleteAPI = async () => {
            try {
                let config = {
                    method: 'DELETE',
                }
                let url = 'https://reqres.in/api/users/2';
                let response = await fetch(url, config);
                let responseJSON = await response.json();
                console.log(response);
                console.log(responseJSON);
            } catch (error) {
                console.log('Failed to fetch data !!!', error.message);
            }
        }
    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

<!DOCTYPE html>

<head>

<title>Resful API</title>

</head>

<body>

<div>

<button onclick="getAPI()">Get Users</button>

<button onclick="postAPI()">Post Login</button>

<button onclick="patchAPI()">Patch User</button>

<button onclick="deleteAPI()">Delete User</button> <br>

<button onclick="postAPI2()">Post Login 2</button>

</div>

const getAPI = async () => {

try {

let url = 'https://reqres.in/api/users?page=2';

let response = await fetch(url);

console.log(response);

let responseJSON = await response.json();

console.log(responseJSON);

} catch (error) {

console.log('Failed to fetch data !!!', error.message);

}

const postAPI = async () => {

try {

let config = {

method: 'POST',

body: JSON.stringify({ email: "[email protected]", password: "cityslicka", }),

headers: {

'Content-Type': 'application/json',

}

let url = 'https://reqres.in/api/login';

let response = await fetch(url, config);

console.log(response);

let responseJSON = await response.json();

console.log(responseJSON);

} catch (error) {

console.log('Failed to fetch data !!!', error.message);

}

const postAPI2 = async () => {

try {

let url = "https://learn-api.jmaster.io:8443/api/login";

let config = {

method: 'POST',

headers: new Headers({

'Content-Type': "application/x-www-form-urlencoded",

'Cookie': "JSESSIONID=B41705BC2C08E0B2A4CF1338348333CE",

}),

body: new URLSearchParams({

'username': '0123456789',

'password': '123456',

}),

redirect: 'follow'

};

let response = await fetch(url, config);

console.log(response);

let responseJSON = await response.json();

console.log(responseJSON);

} catch (error) {

console.log('Failed to fetch data !!!', error.message);

}

const putAPI = async () => {

try {

let config = {

method: 'PUT',

body: JSON.stringify({ name: "James", job: "Student", }),

headers: {

'Content-Type': 'application/json',

}

let url = 'https://reqres.in/api/users/2';

let response = await fetch(url, config);

console.log(response);

let responseJSON = await response.json();

console.log(responseJSON);

} catch (error) {

console.log('Failed to fetch data !!!', error.message);

}

const patchAPI = async () => {

try {

let config = {

method: 'PUT',

body: JSON.stringify({ name: "Robert", job: "Farming", }),

headers: {

'Content-Type': 'application/json',

}

let url = 'https://reqres.in/api/users/2';

let response = await fetch(url, config);

console.log(response);

let responseJSON = await response.json();

console.log(responseJSON);

} catch (error) {

console.log('Failed to fetch data !!!', error.message);

}

const deleteAPI = async () => {

try {

let config = {

method: 'DELETE',

}

let url = 'https://reqres.in/api/users/2';

let response = await fetch(url, config);

let responseJSON = await response.json();

console.log(response);

console.log(responseJSON);

} catch (error) {

console.log('Failed to fetch data !!!', error.message);

}

</script>

</body>

</html>

1. Các phương thức cơ bản

2. Demo Fetch

Framework

PHP – Điều hướng website – Route