Axios 是一個基于 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
如果您想在瀏覽器中使用 Axios,首先需要安裝它。您可以使用 npm(Node 包管理器)或 yarn 來安裝 Axios。例如,在命令行中輸入以下命令:
shell復制代碼
npm install axios |
或
csharp復制代碼
yarn add axios |
安裝完成后,您可以在 JavaScript 文件中引入 Axios,并使用它來發送 HTTP 請求。例如:
javascript復制代碼
import axios from 'axios'; | |
axios.get('/user?ID=12345') | |
.then(function (response) { | |
// handle success | |
console.log(response); | |
}) | |
.catch(function (error) { | |
// handle error | |
console.log(error); | |
}) | |
.finally(function () { | |
// always executed | |
}); |
如果您想在 node.js 中使用 Axios,首先需要安裝它。在命令行中輸入以下命令:
shell復制代碼
npm install axios |
或
csharp復制代碼
yarn add axios |
安裝完成后,您可以在 JavaScript 文件中引入 Axios,并使用它來發送 HTTP 請求。例如:
javascript復制代碼
const axios = require('axios'); | |
axios.get('/user?ID=12345') | |
.then(function (response) { | |
console.log(response); | |
}) | |
.catch(function (error) { | |
console.log(error); | |
}); |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.js"></script>
</head>
<body><script>// axios({// url:"",// method:'',// // 基礎路徑// baseUrl:"",// //get delete head 一類請求攜帶參數// params:{// },// //post put patch 一類請求攜帶// data:{// },// //請求頭// headers:{},// //請求超過幾秒中斷請求// timeout:2000// })// axios get 請求返回的是一個promise對象// let res = axios({// url:"http://hmajax.itheima.net/api/ambition"// }).then(res =>{// console.log(res);// }).catch(error=>{// console.dir(error)// })// console.log(res);// get帶參數 不需要轉換數據格式 axios會自動轉換為json查詢字符串// let res = axios({// url:'http://121.199.0.35:8888/index/article/pageQuery',// // get類請求攜帶參數選項 params只接受一個純js對象 // params:{// page:1,// pageSize:10// }// })// console.log(res);// post請求 post 參數 json字符串或者表單格式數據// post發起請求默認數據格式為json格式 請求頭Content-Type也會自動設置為application/json// let res = axios({// url:'http://121.199.0.35:8888/user/login',// method:'post',// data:{// username:'admin1',// password:123321// }// })// console.log(res);//post 發起表單格式的請求let res = axios({url:"http://121.199.0.35:8888/baseUser/saveOrUpdate",method:'post',data:Qs.stringify({username:'aaa',password:1111}),headers:{'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE3MDIyNjMyNTYsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNzAyNDM2MDU2LCJuYmYiOjE3MDIyNjMyNTZ9.JHmlslry8c_MfFCBH5Ld4PUxYU1-2nMWo2OhOXO3H3g'}})console.log(res);</script>
</body>
</html>
axios快捷方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body><script>// axios({})==>axios.request({})// 快捷方法 get無參 axios.get(url,請求配置項) // axios.get('http://121.199.0.35:8888/index/carousel/findAll').then(res=>{// console.log(res.data,'獲取響應');// });// get帶參 // axios.get('http://121.199.0.35:8888/index/article/pageQuery',{// params:{// page:1,// pageSize:10// },// headers:{// },// timeout:2000// }).then(res=>{// console.log(res.data,'獲取響應');// })// delete head options // axios.post(url,data,請求配置項) 發起post請求 數據格式會自動轉為json格式// let data = {// username:"admin1",// password:123321// }// axios.post('http://121.199.0.35:8888/user/login',data,{// timeout:2000,// headers:{}// }).then(res=>{// console.log(res);// })let data = {username:'測試用戶9999888',password:654789,};axios.post('http://121.199.0.35:8888/baseUser/saveOrUpdate',Qs.stringify(data),{headers:{'Authorization': "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE3MDIyNjMyNTYsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNzAyNDM2MDU2LCJuYmYiOjE3MDIyNjMyNTZ9.JHmlslry8c_MfFCBH5Ld4PUxYU1-2nMWo2OhOXO3H3g"}}).then(res=>{console.log(res.data,'獲取響應');})</script>
</body>
</html>