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>
