axios get请求 作者：马育民 • 2020-12-27 21:43 • 阅读：10224 # get请求 **注意：** 测试时，需要web服务器，如nginx、apache、node.js等 ### html页面 ``` <script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script> <script> axios.get('http://localhost/hello.json').then(function(res){ console.log(res); console.log(res.data); }) </script> ``` ### 数据 `hello.json` 是测试数据，内容如下： ``` { "msg":"hello vue" } ``` ### 测试 将html页面和json放入到nginx服务器的html文件夹下，启动服务，访问html 打印结果如下： [](https://www.malaoshi.top/upload/pic/vue/QQ20201227202301.png) ### 响应结果 - data：响应数据 - headers：响应头信息 - status：响应状态码 - statusText：响应信息 说明：`res.data` 是返回的数据 # get请求-带参数 ### 方式一：url传递参数 ``` <script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script> <script> // 为给定 ID 的 user 创建请求 axios.get('/user?id=12345') .then(function (res) { console.log(res); }) .catch(function (error) {// 请求失败处理 console.log(error); }); </script> ``` ### 方式二：params选项传递参数 ``` <script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script> <script> axios.get('/user', { params: { id: 12345 } }) .then(function (res) { console.log(res); }) .catch(function (error) {// 请求失败处理 console.log(error); }); </script> ``` ### restfull 风格传参 ``` axios.get('http://localhost:8080/user/1234').then(function(res){ console.log(res); console.log(res.data);//服务器端返回的数据 }) ``` ### 箭头函数（lambda表达式） **好处：** 和vue集成时，可以直接用 `this` 表示 vue对象 ``` axios.get('getUserInfo', { }) .then((res) => { console.log(res.data); //在 vue中可以直接用 this 表示 vue this.leave_name=res.data.data.realName }) .catch(function (error) {// 请求失败处理 console.log(error); }); ``` ### 带上头信息 ``` axios.get('http://localhost:8080/web_war_exploded/testJWT',{ headers: { 'auth': localStorage.getItem('auth') } }) .then(res => { console.log(res); }) .catch(error => {// 请求失败处理 console.log(error); }); ``` 原文出处：http://www.malaoshi.top/show_1IXIZteqkMr.html