vue搭配axios踩坑

　　客戶端項目中有一個小需求“我的卡券”，有單獨入口，所以綜合考慮之后，采用了vue來實現，因為是初次使用，導致了選型不當，先用了SUI-Mobile來搭建頁面，當決定使用vue的時候，頁面也搭建完畢了，最終結果就是使用vue+SUI-Mobile+vue-router實現了這么一個小需求。

　　中間考慮使用axios來作異步請求的，但是很不幸的是，在請求接口的時候axios報了404，由於有方便替代的Zepto封裝的ajax，所以當時直接改用ajax來請求了，也沒有去研究究竟什么原因導致的axios請求報錯的。這段時間，相對不那么忙的時候，想到這個問題，就回過頭來把這塊的vue代碼做了一個簡單的review，修改了一些明顯不那么合適的vuejs的代碼，然后就將目標定在了異步請求上面。

　　先看一下，正確的ajax代碼，真實的接口就以變量interface替代：

    getData(){
        var _this = this;
        $.showIndicator();
        var ctx = GetQueryString("path");
        $.ajax({
            type: "post",
            url:ctx+interface,
            data:{"coupon_status":1},
            success:function(data){
                $.hideIndicator();
                if(data.ret_code==1){
                  //網絡異常
                  $.alert('網絡異常');
                }else{
                  _this.list = data.ticketlist;
                }
            }
        })
      }

　　除了真實的接口，這就是之前使用的能夠正常請求的ajax請求。

　　下面改造為axios格式的　

    getData(){
        var _this = this;
        var ctx = GetQueryString("path");
        $.showIndicator();
        axios.post(ctx + interface, {"coupon_status":1}).then((res)=>{
          $.hideIndicator();
          if(data.ret_code==1){
                  //網絡異常
                  $.alert('網絡異常');
                }else{
                  _this.list = data.ticketlist;
                }
        }) 
      }

　　一眼看過去，除了將ajax改為axios，我相信大多數人是看不出有什么問題的

但是事實就是：報錯了，而且報404錯誤

不明原因的ctx獲取的值出現了重復的educloud，而在ajax請求時卻是正常的，導致了接口報404。

通過翻閱axios在GitHub網站api，引用原文You can specify config defaults that will be applied to every request.就是對每一個請求接口設定一些默認配置。

axios.defaults.baseURL = ctx;

　　再請求一次接口

　　

　　不再報404錯誤了，而是400，那400是什么呢？

400錯誤是由於不正確的請求造成的，說明正在搜索的網頁可能已經刪除、更名或暫時不可用。 

　　關鍵在於請求不正確，說明接口已經請求到了，但是當前請求接口有問題，然而ajax請求是正常的，那么問題又在什么地方呢？如果經驗比較豐富一點的，很容易聯想到是不是參數有問題？

　　繼續翻看api，發現

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

　　這里對參數進行了一下處理，那么就照着來吧

    import axios from "axios"
    var ctx = GetQueryString("path");
    var qs = require('qs');
    axios.defaults.baseURL = ctx;
    getData(){
        var _this = this;
        $.showIndicator();
        axios.post(interface, qs.stringify({
          "coupon_status":0
        })).then(function (response) {
          console.log(response)
          var data = response.data;
          $.hideIndicator();
          if(data.ret_code==1){
            //網絡異常
            $.alert('網絡異常');
          }else{
            _this.list = data.ticketlist;
          }
        }).catch((err)=>{
          console.log(err)
        })

　　很榮幸，問題解決了，接口已經可以正確返回數據了。

　　總結一下：

　　axios在調用接口產生問題時，一方面可能是因為接口url不對，那么通過配置默認的baseURL，另一方面，考慮post參數問題，不能直接傳遞一個JS對象，而需要通過qs.stringify(對象)轉換一下。

　　試圖使用JSON.stringify()轉換，很不幸，不可以。