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

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