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

一、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