当前位置: 首页>后端>正文

axios url端口 axios url问题

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

axios url端口 axios url问题,axios url端口 axios url问题_axios url端口,第1张

不明原因的ctx获取的值出现了重复的educloud,而在ajax请求时却是正常的,导致了接口报404。

通过翻阅axios在GitHub网站api,引用原文You can specify config defaults that will be applied to every request.就是对每一个请求接口设定一些默认配置。

axios.defaults.baseURL = ctx;

  再请求一次接口

  

axios url端口 axios url问题,axios url端口 axios url问题_axios url端口_02,第2张

  不再报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()转换,很不幸,不可以。 

  

 

  


https://www.xamrdz.com/backend/3ex1963585.html

相关文章: