025_Axios
1. axios是一個基于Promise用于瀏覽器和node.js的http客戶端。
2. axios具有以下特征
2.1. 支持瀏覽器和node.js。
2.2. 支持Promise。
2.3. 能攔截請求和響應。
2.4. 自動轉換JSON數據。
3. axios get請求傳遞參數
3.1. 通過url傳遞參數
axios.get('aa.action?id=123').then(function(ret){});3.2. 通過params選項傳遞參數
axios.get('aa.action', {params: {id: 456} }).then(function(ret){});4. axios post請求傳遞參數
4.1. 通過選項傳遞參數, 默認傳遞的是json格式的數據
axios.post('aapj.action', {uname: 'lisi',pwd: 456 }).then(function(ret){});4.2. 通過URLSearchParams傳遞參數, 發送的是傳統的表單類型的數據
var params = new URLSearchParams(); params.append('uname', 'zhangsan'); params.append('pwd', '123'); axios.post('aap.action', params).then(function(ret){});5. axios響應結果的主要屬性
5.1. data: 實際響應回來的數據。
5.2. headers: 響應頭信息。
5.3. status: 響應狀態碼。
5.4. statusText: 響應狀態信息。
6. axios全局配置信息
6.1. 配置請求的基準URL地址: axios.defaults.baseURL = 'http://localhost:8080/Axios'。
6.2. 全局設置超時時間: axios.defaults.timeout = 3000。
6.3. 全局設置請求頭信息: axios.defaults.headers['mytoken'] = 'aQWd15SFSa67sSD654FS48AT'。
7. axios請求攔截器
7.1. 在請求發出之前設置一些信息
axios.interceptors.request.use(function(config) {return config; }, function(err){});?8. axios響應攔截器
8.1. 在獲取數據之前對數據做一些加工
axios.interceptors.response.use(function(res) {}, function(err){});?8. async/await的基本用法
8.1. async/await是ES7引入的新語法, 可以更加方便的進行異步操作。
8.2. async關鍵字用于函數上(async函數的返回值是Promise實例對象)。
8.3. await關鍵字用于async函數當中(await可以得到異步的結果)。
8.4. async/await用法
async function queryData() {var ret = await axios.get('aa.action?id=123'); }; queryData();8.5. async/await發送多個異步請求
async function queryData() {var ret = await axios.get('aa.action?id=123');ret = await axios.post('aapj.action', {uname: 'lisi',pwd: 456}); }; queryData();9. 新建一個名為Axios的動態Web工程
9.1. 編寫AxiosAjax.java
package com.bjbs.aa;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class AxiosAjax extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String id = req.getParameter("id");resp.getWriter().write("Axios Ajax get Request... id = " + id);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }9.2. 編寫AxiosAjaxPost.java
package com.bjbs.aa;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class AxiosAjaxPost extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String uname = req.getParameter("uname");String pwd = req.getParameter("pwd");resp.getWriter().write("Axios Ajax post Request... uname = " + uname + ", pwd = " + pwd);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }9.3. 編寫AxiosAjaxPostJson.java
package com.bjbs.aa;import java.io.BufferedReader; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class AxiosAjaxPostJson extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {BufferedReader br = req.getReader();String result = "", rl = null;while((rl = br.readLine()) != null) {result += rl;}System.out.println("Axios Ajax post Request Json Param... result = " + result);String res = "{\"code\":1,\"result\":\"success.\"}";resp.getWriter().write(res);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }9.4. 編寫axios.html
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>axios基本用法</title></head><body><script type="text/javascript" src="axios.js"></script><script type="text/javascript">// 配置請求的基準URL地址axios.defaults.baseURL = 'http://localhost:8080/Axios';// 全局設置超時時間axios.defaults.timeout = 3000;// 全局設置請求頭信息axios.defaults.headers['mytoken'] = 'aQWd15SFSa67sSD654FS48AT';axios.get('aa.action?id=123').then(function(ret){// 注意data屬性是固定的用法, 用于獲取后臺的實際數據document.write(ret.data + "<br />");});axios.get('aa.action', {params: {id: 456}}).then(function(ret){document.write(ret.data + "<br />");});// 傳遞傳統的表單類型的數據var params = new URLSearchParams();params.append('uname', 'zhangsan');params.append('pwd', '123');axios.post('aap.action', params).then(function(ret){document.write(ret.data + "<br />");});// 默認傳遞JSON格式數據axios.post('aapj.action', {uname: 'lisi',pwd: 456}).then(function(ret){document.write("code = " + ret.data.code + ", result = " + ret.data.result + "<br />");});</script></body> </html>9.5. 編寫async-await.html
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>異步請求</title></head><body><script type="text/javascript" src="axios.js"></script><script type="text/javascript">async function queryData() {var ret = await axios.get('aa.action?id=123');document.write(ret.data + "<br />");ret = await axios.post('aapj.action', {uname: 'lisi',pwd: 456});document.write("code = " + ret.data.code + ", result = " + ret.data.result + "<br />");};queryData();</script></body> </html>9.6. 編寫interceptors.html
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>axios攔截器</title></head><body><script type="text/javascript" src="axios.js"></script><script type="text/javascript">// 全局設置超時時間axios.defaults.timeout = 3000;// 請求攔截器axios.interceptors.request.use(function(config) {console.log(config);config.headers.mytoken = 'aQWd15SFSa67sSD654FS48AT';return config;}, function(err){console.log(err);});// 響應攔截器axios.interceptors.response.use(function(res) {console.log(res);return res;}, function(err){console.log(err);});axios.get('aa.action?id=123').then(function(ret){document.write(ret.data + "<br />");});var params = new URLSearchParams();params.append('uname', 'zhangsan');params.append('pwd', '123');axios.post('aap.action', params).then(function(ret){document.write(ret.data + "<br />");});</script></body> </html>9.7. 修改web.xml
9.8. 運行項目, 訪問axios.html?
9.9. 運行項目, 訪問interceptors.html?
總結
- 上一篇： 024_Fetch
- 下一篇： 026_图书管理案例