1. axios是一個(gè)基于Promise用于瀏覽器和node.js的http客戶端。

2. axios具有以下特征

2.1. 支持瀏覽器和node.js。

2.2. 支持Promise。

2.3. 能攔截請求和響應(yīng)。

2.4. 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)。

3. axios get請求傳遞參數(shù)

3.1. 通過url傳遞參數(shù)

axios.get('aa.action?id=123').then(function(ret){});

3.2. 通過params選項(xiàng)傳遞參數(shù)

axios.get('aa.action', {params: {id: 456} }).then(function(ret){});

4. axios post請求傳遞參數(shù)

4.1. 通過選項(xiàng)傳遞參數(shù), 默認(rèn)傳遞的是json格式的數(shù)據(jù)

axios.post('aapj.action', {uname: 'lisi',pwd: 456 }).then(function(ret){});

4.2. 通過URLSearchParams傳遞參數(shù), 發(fā)送的是傳統(tǒng)的表單類型的數(shù)據(jù)

var params = new URLSearchParams(); params.append('uname', 'zhangsan'); params.append('pwd', '123'); axios.post('aap.action', params).then(function(ret){});

5. axios響應(yīng)結(jié)果的主要屬性

5.1. data: 實(shí)際響應(yīng)回來的數(shù)據(jù)。

5.2. headers: 響應(yīng)頭信息。

5.3. status: 響應(yīng)狀態(tài)碼。

5.4. statusText: 響應(yīng)狀態(tài)信息。

6. axios全局配置信息

6.1. 配置請求的基準(zhǔn)URL地址: axios.defaults.baseURL = 'http://localhost:8080/Axios'。

6.2. 全局設(shè)置超時(shí)時(shí)間: axios.defaults.timeout = 3000。

6.3. 全局設(shè)置請求頭信息: axios.defaults.headers['mytoken'] = 'aQWd15SFSa67sSD654FS48AT'。

7. axios請求攔截器

7.1. 在請求發(fā)出之前設(shè)置一些信息

axios.interceptors.request.use(function(config) {return config; }, function(err){});

?8. axios響應(yīng)攔截器

8.1. 在獲取數(shù)據(jù)之前對數(shù)據(jù)做一些加工

axios.interceptors.response.use(function(res) {}, function(err){});

?8. async/await的基本用法

8.1. async/await是ES7引入的新語法, 可以更加方便的進(jìn)行異步操作。

8.2. async關(guān)鍵字用于函數(shù)上(async函數(shù)的返回值是Promise實(shí)例對象)。

8.3. await關(guān)鍵字用于async函數(shù)當(dāng)中(await可以得到異步的結(jié)果)。

8.4. async/await用法

async function queryData() {var ret = await axios.get('aa.action?id=123'); }; queryData();

8.5. async/await發(fā)送多個(gè)異步請求

async function queryData() {var ret = await axios.get('aa.action?id=123');ret = await axios.post('aapj.action', {uname: 'lisi',pwd: 456}); }; queryData();

9. 新建一個(gè)名為Axios的動(dòng)態(tài)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">// 配置請求的基準(zhǔn)URL地址axios.defaults.baseURL = 'http://localhost:8080/Axios';// 全局設(shè)置超時(shí)時(shí)間axios.defaults.timeout = 3000;// 全局設(shè)置請求頭信息axios.defaults.headers['mytoken'] = 'aQWd15SFSa67sSD654FS48AT';axios.get('aa.action?id=123').then(function(ret){// 注意data屬性是固定的用法, 用于獲取后臺(tái)的實(shí)際數(shù)據(jù)document.write(ret.data + "<br />");});axios.get('aa.action', {params: {id: 456}}).then(function(ret){document.write(ret.data + "<br />");});// 傳遞傳統(tǒng)的表單類型的數(shù)據(jù)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 />");});// 默認(rèn)傳遞JSON格式數(shù)據(jù)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">// 全局設(shè)置超時(shí)時(shí)間axios.defaults.timeout = 3000;// 請求攔截器axios.interceptors.request.use(function(config) {console.log(config);config.headers.mytoken = 'aQWd15SFSa67sSD654FS48AT';return config;}, function(err){console.log(err);});// 響應(yīng)攔截器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. 運(yùn)行項(xiàng)目, 訪問axios.html?

9.9. 運(yùn)行項(xiàng)目, 訪問interceptors.html?

總結(jié)

以上是生活随笔為你收集整理的025_Axios的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。