axios get请求

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

打印结果如下:

响应结果

  • 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);
});

原文出处:https://malaoshi.top/show_1IXIZteqkMr.html