前端向后端發送請求的方式總結

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