vue.js如何发送Ajax请求?

vue.js如何发送Ajax请求?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

Vuejs发送Ajax请求

一、概况

①vuejs中没有内置任何ajax请求方法

②在vue1.0版本,使用的插件 vue resource 来发送请求,支持promise

③在vue2.0版本,使用社区的一个第三方库 axios ,也支持promise

④在HTML5时代,浏览器增加了一个特殊的异步请求方法 fetch,原生支持promise,由于兼容性问题,一般用于移动端

⑤还有的项目会使用vue和jquery混用,借助jQuery的ajax方法

二、axios库的使用

①安装和引入:

npm直接下载axios组件,下载完毕后axios.js就存放在node_modules\axios\dist中

npm install axios

网上直接下载axios.min.js文件,或者使用cdn,通过script src的方式进行文件的引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

②发送get请求

基本使用格式:

axios([options])        #这种格式直接将所有数据写在options里,options其实是个字典
axios.get(url[,options]);

传参方式:通过url传参,通过params选项传参

案例:

<div id="app">
        <button @click='send'>发送Ajax请求</button>
        <button @click='sendGet'>GET方式发送Ajax请求</button>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script>
            new Vue({
                el:'#app',
                data:{
                    user:{name:'eric',age:24},
                },
                methods:{
                    send(){
                      axios({
                          method:'get',
                          url:'http://www.baidu.com?name=jack&age=30'
                      }).then(function(resp){
                          console.log(resp.data);
                      }).catch(err=>{
                          console.log('请求失败:'+err.status+','+err.statusText);
                      });
                    },
                    sendGet(){
                        axios.get('server.php',{
                            params:{name:'tom',age:20}
                        }).then(resp=>{
                            console.log(resp.data)
                        }).catch(resp=>{
                            console.log('请求失败:'+err.status+','+err.statusText);
                        });
                    },
                },
            });
    </script>

③发送post请求(push,delete的非get方式的请求都一样)

基本使用格式

axios.post(url,data,[options]);

传参方式:自己拼接为键值对;使用transformRequest,在请求发送前将请求数据进行转换;如果使用模块化开发,可以使用qs模块进行转换;

注意:axios默认发送post数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参

案例:

<div id="app">
        <button @click='sendPost'>post方式发送Ajax请求</button>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script>
            new Vue({
                el:'#app',
                data:{
                    user:{name:'eric',age:24},
                },
                methods:{
                    sendPost(){
                        axios.post('server.php',this.user,{
                            transformRequest:[
                                function(data){
                                    let params='';
                                    for(let index in data){
                                        params+=index+'='+data[index]+'&';
                                    }
                                    return params;
                                }
                            ]
                        }).then(resp=>{
                            console.log(resp.data)
                        }).catch(err=>{
                            console.log('请求失败:'+err.status+','+err.statusText);
                        });
                    },
                },
            });
    </script>

④发送跨域请求:axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库,可以使用vue-resource发送跨域请求

更多web前端知识,请查阅 HTML中文网 !!

以上就是vue.js如何发送Ajax请求?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏