欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用axios发送get，post请求

程序员文章站 2022-03-04 23:50:52
...

马上要去找工作了，把这大半年自学的和工作室中学到的东西总结一下。顺便刷刷面试题。
在vue中发送请求可以通过vue-resource发送，也可以使用axios发送请求。当然两者有一定的区别。
vue-resource

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。

vue-resource特点：

体积小
vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

支持主流的浏览器
和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。

支持Promise API和URI Templates,Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

支持拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。

那么axios功能特性
1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 CSRF/XSRF 攻击（这个表示没有什么具体的体会，可能是因为跟着工作室做的都是些小项目23333）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="axios.min.js"></script>
    <script src="qs.min.js"></script>
    <script src="vue.js"></script>
</head>
<body>
    <script>
        axios.get(
            'http://localhost:3000/index'
        ).then((res)=>{
            console.log(res);
        })
        var id = 1;
        axios.get(
            'http://localhost:3000/details',
            {
                params:{id}
            }
        ).then(res=>{
            console.log(res);
        })    
        var uname = "Garyull", upwd = "12345678";
        axios.post(
            "http://localhost:3000/users/signin",
            Qs.stringify({uname,upwd})
        ).then(res=>{
            console.log(res.data)
        })
    </script>
</body>
</html>

更加详细的相关用法可以参考：
https://www.jianshu.com/p/7a9fbcbb1114

相关标签： axios

上一篇： 分享一个axios的通用配置

下一篇： MySQL 事务下

推荐阅读