Ajax:異步的JavaScript和XML
作用:
- 數據交換
- 異步交互
Axios:就是對原生Ajax進行封裝,簡化書寫,快速開發?
使用邏輯:?
首先要安裝Axios,可以通過npm在項目中安裝:
- 打開命令行工具,進入項目根目錄
- 運行以下命令來安裝Axios:
npm install axios
- 安裝完成后,你可以在項目中引入Axios來發送HTTP請求。在JavaScript文件中引入Axios的方法如下:
const axios = require('axios');
或者如果你是在瀏覽器環境中使用Axios,你可以通過<script>
標簽引入CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
這樣就可以開始使用Axios來發送網絡請求了。
axios({method:'GET',url:"http://localhost:3000/api/data"}).then((result)=>{ //成功回調函數console.log(result.data);}).catch((err)=>{ //失敗回調函數alert(err);});
method:請求方式,GET/POST....
url:請求路徑
data:請求數據(POST)
params :發送請求時攜帶的url參數 如:...?key=val
Axios-請求方式別名?
為了方便起見,Axios已經為所有支持的請求方法提供了別名
在Axios中,可以通過提供不同的方法來發送不同類型的HTTP請求。下面是一些常用的Axios請求別名方法:
axios.request(config)
:發送自定義請求,可以定義請求的方法、URL、請求頭、請求體等配置。
axios.request({method: 'post',url: 'https://api.example.com/custom_request',data: {key: 'value'}
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});
axios.get(url[, config])
:發送GET請求,配置可以包括params、headers等。
axios.get('https://api.example.com/get_data', { params: { id: 123 } })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});
axios.delete(url[, config])
:發送DELETE請求,可以設置URL和請求配置。
axios.delete('https://api.example.com/delete_data', { params: { id: 456 } })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});
axios.post(url[, data[, config]])
:發送POST請求,同時可以傳遞請求體數據和配置。
axios.post('https://api.example.com/post_data', { key: 'value' }, { headers: { 'Content-Type': 'application/json' } })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});
axios.put(url[, data[, config]])
:發送PUT請求,可以傳遞URL、請求體數據和配置。
axios.put('https://api.example.com/put_data', { key: 'value' })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});
通過使用這些請求別名方法,你可以更加方便地發送不同類型的HTTP請求。
輸出先后順序:
?????? 原因:Ajax是異步請求
解決方法:
?異步同步化(讓代碼從上往下按順序執行)
?可以通過async、await可以讓異步變為同步操作。async就是來聲明一個異步方法,await是用來等待異步任務執行