vue搭配axios踩坑

Z时代
2024-01-10
分类：综合

vue

　　客户端项目中有一个小需求“我的卡券”，有单独入口，所以综合考虑之后，采用了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)
        })