前端向后端发送请求的方式总结

一、uniapp

1、uniapp.request({ })

uni.request({
    url: '/api/index_category/data',
    method: 'GET',
    success: res => {
        console.log(res); 
    },
    fail: () => {
        console.log('请求失败');
    },
    complete: () => {
        console.log('请求完成');
    }
})

  

二、vue

vue不支持直接发送AJAX请求,需要使用vue-resource、axios等插件实现。

1、Axios方式(推荐)

  1. 安装axios并引入:
    1. npm install axios -S (直接下载axios组件,下载完毕后axios.js就存放在node_modules\axios\dist中),首先在 main.js 中引入 axios:在此文件加入import axios from 'axios',如果在其它的组件中无法使用 axios 命令。可以将 axios 改写为 Vue 的原型属性:Vue.prototype.$http=axios,在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 this.$http命令。
    2. 网上直接下载axios.min.js文件,通过script src的方式进行文件的引入  
  2. 发送请求:  
    1. get请求使用格式:
      1. axios([options]) (这种格式直接将所有数据写在options里,options其实是个字典)
      2. axios.get(url[,options]);  
      3. <script>     
            new Vue({
                     el:'#itany',
                     data:{
                        user:{
                             name:'alice',
                             age:19
                            },
                        },
                        methods:{
                            send(){
                                axios({//格式a
                                    method:'get',
                                    url:'http://www.baidu.com?name=tom&age=23'
                                }).then(function(resp){
                                    console.log(resp.data);
                                }).catch(resp => {
                                    console.log('请求失败:'+resp.status+','+resp.statusText);
                                });
                            },
                            sendGet(){//格式b
                                axios.get('server.php',{
                                    params:{
                                        name:'alice',
                                        age:19
                                    }
                                })
                                .then(resp => {
                                    console.log(resp.data);
                                }).catch(err => {             //
                                    console.log('请求失败:'+err.status+','+err.statusText);
                                });
                            },
                        }
                    });
            </script>
        代码部分
    2. post请求格式:
      1. axios.post(url,data,[options]); 
      2. new Vue({
                        el:'#itany',
                        data:{
                            user:{
                                name:'alice',
                                age:19
                            },
                        },
                        methods:{
                            sendPost(){
                                // axios.post('server.php',{
                                //         name:'alice',
                                //         age:19
                                // }) //该方式发送数据是一个Request Payload的数据格式,一般的数据格式是Form Data格式,所有发送不出去数据
                                // axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据
                                axios.post('server.php',this.user,{  //方式2通过transformRequest方法发送数据,本质还是将数据拼接成字符串
                                    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);
                                });
                            },
                        }
                    });
        代码部分
    3. 发送跨域请求:
      1. 须知:axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库
      2. 使用vue-resource发送跨域请求
      3. 安装vue-resource并引入    

           npm info vue-resource           #查看vue-resource 版本信息
              cnpm install vue-resource -S #等同于cnpm install vue-resource -save

      4. 基本使用方法(使用this.$http发送请求) 

            this.$http.get(url, [options])

            this.$http.head(url, [options])

            this.$http.delete(url, [options])

            this.$http.jsonp(url, [options])

            this.$http.post(url, [body], [options])

            this.$http.put(url, [body], [options])

            this.$http.patch(url, [body], [options])

三、html

 

四、

原文地址1

原文地址2

posted @ 2021-01-06 21:25  潜跃  阅读(3927)  评论(0编辑  收藏  举报