axios的使用

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>