ES6---axios和RESTful-有解無憂

ES6---axios和RESTful

axios：和ajax一樣，搭建其前后端的橋梁
RESTful：介面風格，基于HTTP，CRUD（新增讀取更新洗掉：增刪改查）所呼叫資源，可用xml也可用json格式
風格核心：是“動賓結構”，比如GET/articles

1. 先準備個std_axios.js檔案，RESTful風格的請求方式

//一：標準RESTful風格的四種方法

//GET請求
function getTodos() {
    console.log('GET 請求');
}

//POST請求
function addTodo() {
    console.log('POST 請求');
}

//PUT/patch請求
function updateTodo() {
    console.log('PUT/patch請求');
}

//Delete請求
function removeTodo() {
    console.log('delete 請求');
}

//二：常用的其他請求

//批量請求資料
function getData() {
    console.log('批量請求資料');
}

//自定義請求頭
function customHeaders() {
    console.log('自定義請求頭');
}

//transforming 請求 回應
function transformResponse() {
    console.log('transforming 請求 回應,對回應資料進行轉換');
}

//錯誤處理 
function errorHandle() {
    console.log('deal with Error 處理錯誤');
}

//取消token
function cancalToken() {
    console.log('cancel token 取消token');
}

2. 引入axios.min.js和std_axios.js

    <script src="https://www.cnblogs.com/jane-panyiyun/p/js/axios.min.js"></script>
    <script src="https://www.cnblogs.com/js/std_axios.js"></script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios和RESTful</title>
    <script src="js/axios.min.js" type="text/javascript"></script>
    <script src="js/std_axios.js" type="text/javascript"></script>
</head>

<body>
    <button id="getBtn">GET</button>
    <button id="addBtn">POST</button>
    <button id="putBtn">PUT/PATCH</button>
    <button id="delBtn">DELETE</button>
</body>
<script>
    document.getElementById("getBtn").addEventListener('click', getTodos);
    document.getElementById("addBtn").addEventListener('click', addTodo);
    document.getElementById("putBtn").addEventListener('click', updateTodo);
    document.getElementById("delBtn").addEventListener('click', removeTodo);
</script>

</html>

console: GET獲取資料

4. 具體到data

//GET請求
function getTodos() {
    console.log('GET 請求');
    axios.get('1111.json')
        .then(result => {
            console.log(result.data);
        });
}

console:

5. 看檔案其實axios回傳的是一個response物件：回應物件，包含以下資訊的回應結構：

6. 還可以傳一個config物件來請求

//GET請求
function getTodos() {
    console.log('GET 請求');
    //還可以傳一個config物件來請求
    axios({
        url: '1111.json',
        method: 'get'
    })
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.log(error);
        });
}

console:

7. 這上面有個status=0的問題，因為我用的本地file協議出的問題，改用http協議就可以讓status=200了，具體參考解決：本地搭建http-server服務器來用Http協議代替File協議

console：列印后status正常了

8. jsonpalceholder

JSONPlaceholder 是一個提供免費的在線 REST API 的網站，我們在開發時可以使用它提供的 url 地址測驗下網路請求以及請求引數，或者當我們程式需要獲取一些假資料、假圖片時也可以使用它，
簡而言之就是不需要寫后臺，專門用來做測驗，提供了一套RESTful風格的API
http://jsonplaceholder.typicode.com/

9. jsonplaceholder 六個常用資源

10. 使用資源

//GET請求
function getTodos() {
    console.log('GET 請求');
    //還可以傳一個config物件
    axios({
        url: 'http://jsonplaceholder.typicode.com/todos',
        method: 'get'
    })
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.log(error);
        });
}

console: 成功獲取

11. 限制下得到的資料

//GET請求
function getTodos() {
    console.log('GET 請求');
    //還可以傳一個config物件
    axios({
        url: 'http://jsonplaceholder.typicode.com/todos?_limit=4',
        method: 'get'
    })
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.log(error);
        });
}

console: 得到4條資料

12. 把獲取到的資料展示出來

//GET請求
function getTodos() {
    console.log('GET 請求');
    //還可以傳一個config物件
    axios({
        url: 'http://jsonplaceholder.typicode.com/todos?_limit=4',
        method: 'get'
    })
        .then(response => {
            //console.log(response);
            //傳統模式，手動操作DOM
            //MVVM模式，把data賦值給status
            show(response);
        })
        .catch(error => {
            console.log(error);
        });
}

添加一個show()方法，用來把資料顯示在頁面，再單獨寫個show()方法

//三、手動操作DOM
function show(response) {
    // console.log(response);
    document.getElementById("showDiv").innerHTML = '<div>' + response.status + '</div>';
}

console:

13. 頁面顯示更多的請求回應內容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios和RESTful</title>
    <script src="https://www.cnblogs.com/jane-panyiyun/p/js/axios.min.js" type="text/javascript"></script>
    <script src="https://www.cnblogs.com/jane-panyiyun/p/js/std_axios.js" type="text/javascript"></script>
</head>

<body>
    <div>
        <button id="getBtn">GET</button>
        <button id="addBtn">POST</button>
        <button id="putBtn">PUT/PATCH</button>
        <button id="delBtn">DELETE</button>
    </div>
    <div id="statusDiv" style="width: 200px; height: 20px;color: blue;"></div>
    <div id="statusTextDiv" style="width: 200px; height: 20px;color:hotpink;"></div>
</body>
<script>
    document.getElementById("getBtn").addEventListener('click', getTodos);
    document.getElementById("addBtn").addEventListener('click', addTodo);
    document.getElementById("putBtn").addEventListener('click', updateTodo);
    document.getElementById("delBtn").addEventListener('click', removeTodo);
</script>

</html>

statusText

//三、手動操作DOM
function show(response) {
    // console.log(response);
    document.getElementById("statusDiv").innerHTML = '<div>' + response.status + '</div>';
    document.getElementById("statusTextDiv").innerHTML = '<div>' + response.statusText + '</div>';
}

console:

14.

    <div id="statusDiv" style="width: 200px; height: 20px;color: blue;"></div>
    <div id="statusTextDiv" style="width: 200px; height: 20px;color:hotpink;"></div>
    <div id="dataDiv" style="color: purple;"></div>

//三、手動操作DOM
function show(response) {
    // console.log(response);
    document.getElementById("statusDiv").innerHTML = '<div>' + response.status + '</div>';
    document.getElementById("statusTextDiv").innerHTML = '<div>' + response.statusText + '</div>';
    console.log(response.data);
    document.getElementById("dataDiv").innerHTML = '<div>' + response.data + '</div>';
}

console：

15. json.stringfy()

response.data是一個json物件，可以用json.stringfy()轉換為字串

    <div id="statusDiv" style="width: 200px; height: 20px;color: blue;"></div>
    <div id="statusTextDiv" style="width: 200px; height: 20px;color:hotpink;"></div>
    <textarea id="dataDiv" style="color: purple;"></textarea>

//三、手動操作DOM
function show(response) {
    // console.log(response);
    document.getElementById("statusDiv").innerHTML = '<div>' + response.status + '</div>';
    document.getElementById("statusTextDiv").innerHTML = '<div>' + response.statusText + '</div>';
    console.log(response.data);
    document.getElementById("dataDiv").value = https://www.cnblogs.com/jane-panyiyun/p/JSON.stringify(response.data, null, 2);
}

console:

16.

    <div id="statusDiv" style="width: 200px; height: 20px;color: blue;"></div>
    <div id="statusTextDiv" style="width: 200px; height: 20px;color:hotpink;"></div>
    <textarea id="dataDiv" style="color: purple;"></textarea>
    <textarea id="headerDiv" style="color: green;"></textarea>
    <textarea id="configDiv" style="color: orange;"></textarea>
    <textarea id="requestDiv" style="color: yellow;"></textarea>

//三、手動操作DOM
function show(response) {
    // console.log(response);
    document.getElementById("statusDiv").innerHTML = '<div>' + response.status + '</div>';
    document.getElementById("statusTextDiv").innerHTML = '<div>' + response.statusText + '</div>';
    document.getElementById("dataDiv").value = https://www.cnblogs.com/jane-panyiyun/p/JSON.stringify(response.data, null, 2);
    document.getElementById("headerDiv").value = https://www.cnblogs.com/jane-panyiyun/p/JSON.stringify(response.header, null, 2);
    document.getElementById("configDiv").value = https://www.cnblogs.com/jane-panyiyun/p/JSON.stringify(response.config, null, 2);
    document.getElementById("requestDiv").value = https://www.cnblogs.com/jane-panyiyun/p/JSON.stringify(response.request, null, 2);
}

console:

17. ES6寫法

'<div>' + response.status + '</div>';

寫法改為

`<div>${response.status}</div>`;

function show(response) {
    // console.log(response);
    document.getElementById("statusDiv").innerHTML = `<div>${response.status}</div>`;
    document.getElementById("statusTextDiv").innerHTML = `<div>${response.statusText} </div>`;
    document.getElementById("dataDiv").value = https://www.cnblogs.com/jane-panyiyun/p/JSON.stringify(response.data, null, 2);
    document.getElementById("headersDiv").value = https://www.cnblogs.com/jane-panyiyun/p/JSON.stringify(response.headers, null, 2);
    document.getElementById("configDiv").value = https://www.cnblogs.com/jane-panyiyun/p/JSON.stringify(response.config, null, 2);
    document.getElementById("requestDiv").value = https://www.cnblogs.com/jane-panyiyun/p/JSON.stringify(response.request, null, 2);
}

console: 結果一樣，以后都是這樣寫的

18. 動態展示記錄條數，通過用config方式傳具體的params:{}去獲取資料

<div>記錄條數: <input id="recordCount" value="https://www.cnblogs.com/jane-panyiyun/p/1" type="text"></div>

//GET請求
function getTodos() {
    console.log('GET 請求');
    //還可以傳一個config物件
    axios({
        url: 'http://jsonplaceholder.typicode.com/todos',
        method: 'get',
        params: {
            _limit: document.getElementById("recordCount").value
        }
    })
        .then(response => {
            //console.log(response);
            //傳統模式，手動操作DOM
            //MVVM模式，把data賦值給status
            show(response);
        })
        .catch(error => {
            console.log(error);
        });
}

console: 輸入幾條就顯示幾條

體會RESTful風格~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/117337.html

標籤：JavaScript

上一篇：ES6 常用特性總結

下一篇：[javascript] 主流瀏覽器對ES6的支持情況