Axios傳送Get、Post請求示例
阿新 • • 發佈：2021-12-11
學而不思則罔，思而不學則殆！<!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <meta charset="UTF-8"> <title>測試</title> <script> // TODO axios傳送請求統一模板 // axios({ // method: `get`, // http請求方法 // url: `http://httpbin.org/get?param=hello` // http服務地址 // }) // .then(function (response) { // 自動轉換JSON資料 // // 請求成功響應結果response // console.log(response); // console.log(JSON.stringify(response.url)); // }).catch(function (error) { // // 請求異常響應結果 // console.log(error); // }); // TODO axios傳送GET請求 // axios.get("http://httpbin.org/get?param=hello") // .then(function (response){ // console.log("[GET] response" + response) // }) // .catch(function () { // console.log("[GET] response" + response) // }); /* 使用axios(config)傳送http請求，config為該請求的配置資訊物件 axios.get等同於axios使用method:get。 axios是基於Promise的HTTP客戶端，所以可以使用then、catch對請求結果進行處理。 * */ // TODO axios通過params包裝傳送GET請求 // axios.get("http://httpbin.org/get", { // params: { // param: "hello" // } // }).then(function (response) { // console.log(response); // }).catch(function (error) { // console.log(error); // }); // TODO axios傳送POST請求 // axios({ // method: `post`, // 請求方法 // url: `http://httpbin.org/post`, // 請求服務地址 // data: { // firstName: '壯壯', // lastName: '王' // } // }); // TODO axios傳送POST請求 // axios.post('http://httpbin.org/post', { // firstName: '壯壯', // lastName: '王' // }) // dismiss [then][catch] // TODO axios傳送並行請求 // 在一些情況下需要某些非同步網路請求結果處理有一定的順序 // 比如 getHello()和getWorld()兩個非同步操作，將兩個HTTP的請求都完成之後，結果合併並處理或進行下一步操作 function getHello() { return axios.get('http://httpbin.org/get?param=hello'); } function getWorld() { return axios.get('http://httpbin.org/get?param=world'); } axios.all([getHello(), getWorld()]) .then(axios.spread(function (res1, res2) { // 兩個請求都執行完成之後，進入該函式 console.log(res1.data.args.param + " " + res2.data.args.param); })); /** * 上面的axios.all函式還可以寫成如下的形式，返回值是一個數組。 * 然後通過陣列下標獲取響應結果資料。results[0]代表第一個getHello()函式的請求結果， * results[1]代表第二個getWorld()函式的請求結果。 * */ axios.all([getHello(), getWorld()]) .then(function (results) { console.log(results[0].data.args.param + " " + results[1].data.args.param) }); </script> <style> </style> </head> <body> </body>