axios是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它可以在瀏覽器和node環境下運行，在github上已經有六七萬個星了，axios使用很方便，很多人在使用他,vue官方也推薦使用axios了，技術這東西還是隨主流吧，大家都用肯定有它的特長所在。
axios現在最新的版本的是v0.19.0，實現代碼也很好理解。我們本節先說一下它的使用方法，然后來分析一下它的實現源碼
我們可以使用兩種方式來創建一個axios實例:
·一種是直接調用axios(config)
·另一種是調用axios.create(config)來自定義配置新建一個axios實例。
、config可以是一個url地址(此時表示發送get請求),也可以是一個對象，對象可以含有如下屬性:
- url ;請求的地址
- method ;請求的類型 ;可以是get、post、head、options、delete、put、patch之一
- data ;發送的數據 ;作為請求主體被發送的數據，只適用於PUT、POST、PATCH之一
- baseURL ;將自動加在url前面
- params ;即將與請求一起發送的url參數
- paramsSerializer ;負責params序列化的函數 ;一般可以忽略，axios內部可以自動序列化的
- timeout ;超時時間(0表示無超時時間)
- responseType ;服務器響應的數據類型 ;可以是arraybuffer、blob、document、json、text、stream之一
- onUploadProgress ;上傳處理進度事件
- onDownloadProgress ;下載處理進度事件
、axios的配置有兩種默認配置方式:
- 全局的axios默認值 通過修改axios.default上的屬性來設置 ;例如:axios.defaults.baseURL = 'https://api.example.com';
- 自定義實例默認值 可以傳入一個配置對象，用該對象新建一個axios實例 ;例如:var myaxios = axios.create({baseURL:'/ajax'})
、舉個栗子，有個需求是這樣的:有一個輸入框，對應兩個按鈕，點擊一個按鈕則請求數據庫使按鈕里的值+10，點擊另外一個按鈕則使按鈕里的值減5。
writer by:大沙漠 QQ:22969969
首先我們定義兩個php接口文件，分別為add.php和sub.php，add.php如下:
sub.php如下:
他們的路勁分別為http://j.com/ajax/add.php和http://j.com/ajax/sub.php，這是前后端分離典型的一個接口目錄,注意add.php的請求方式是get請求，而post.php是post請求，然后我們寫前端文件，如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <input type="text" id="i"> <button id="b1">遞增10</button> <button id="b2">遞增10(自定義配置)</button> <button id="b3">遞減5</button> <script> axios.defaults.baseURL = '/ajax/'; b1.onclick =function(){ //全局的axios默認值方法 axios('/add.php?no='+i.value).then(res=>{ if(res.data.code==0){ i.value = res.data.data.no } }) } b2.onclick=function(){ //自定義的實例默認化 var myaxios = axios.create({baseURL:'/ajax'}) //自定義配置，和按鈕1的實現效果是一樣的 myaxios({ url:'/add.php', params:{no:i.value} }).then(res=>{ if(res.data.code==0){ i.value = res.data.data.no } }) } b3.onclick=function(){ //對於post請求來說 axios({ method:'post', url:'/sub.php', data:"no="+i.value }).then(res=>{ if(res.data.code==0){ i.value = res.data.data.no } }) } </script> </body> </html>
頁面效果如下:
當我們點擊遞增10時，頁面變為了如下:
點擊第二個按鈕后輸入框也是等於10，點擊遞減5按鈕后，輸入框如下:
、為了方便起見，所有支持的方法都提供了別名，如下:
axios.get(url,config) ;get請求的便捷方法
axios.delete(url,config) ;delete請求的便捷方法
axios.head(url,config) ;head請求的便捷方法
axios.post(url,data,config) ;post請求的便捷方法
axios.put(url,data,config) ;put請求的便捷方法
axios.patch(url,data,config) ;patch請求的便捷方法
、因此實例的前端代碼可以腳本可以修改一下，如下:
<script> axios.defaults.baseURL = '/ajax/'; b1.onclick =function(){ //全局的axios默認值方法 axios.get('/add.php?no='+i.value).then(res=>{ if(res.data.code==0){ i.value = res.data.data.no } }) } b2.onclick=function(){ //自定義的實例默認化 var myaxios = axios.create({baseURL:'/ajax'}) myaxios.get('/add.php?no='+i.value).then(res=>{ if(res.data.code==0){ i.value = res.data.data.no } }) } b3.onclick=function(){ //對於post請求來說 axios.post('/sub.php',{method:'post',data:"no="+i.value}).then(res=>{ if(res.data.code==0){ i.value = res.data.data.no } }) } </script>
渲染結果是一樣的，挺簡單的吧。
axios請求后返回的是一個promise對象，如果成功了返回的response對象含有六個屬性，如下:
data ;由服務器提供的響應數據
status ;來自服務器響應的 HTTP 狀態碼
statusText ;來自服務器響應的 HTTP 狀態信息
headers ;服務器響應的頭,是個對象 ;包含content-type、date、connection、conetent-length、server等響應頭
config ;本次ajax請求的配置信息，是個對象
request ;本次請求對應的XMLHttpRequest對象
例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <input type="text" id="i"> <button id="b">測試1</button> <script> b.onclick=function(){ axios('/ajax/add.php/no='+i.value).then(res=>{ console.log(res.data) console.log(res.status) console.log(res.statusText) console.log(res.headers) console.log(res.config) console.log(res.request ) }) } </script> </body> </html>
渲染如下:
我們點擊按鈕后輸出如下:
把promise()對象的信息給打印出來了，一般我們會在響應攔截器里對這些返回值一層判斷，響應器再后面介紹。