美文网首页
解决axios 使用 URLSearchParams解析参数,导

解决axios 使用 URLSearchParams解析参数,导

作者: 会撸码的小马 | 来源:发表于2018-09-26 10:21 被阅读0次

    先贴代码:

    obj2String(obj: any, arr: any = [], idx = 0) {
      try {
          
          for (let item in obj) {
              arr[idx++] = [item, obj[item]]
          }
          return new URLSearchParams(arr).toString()
      } catch (error) {
          console.log('====================================');
          console.log(error);
          console.log('====================================');
      }
    }
    
    commonPost(url: string, options:{}) {
    
      const searchStr = obj2String(options);
      return new Promise((resolve, reject) => {
          axios
            .post(url, searchStr)
            .then(function(response) {
              if (response.status == 200) {
                resolve(response.data);
              } else {
                reject(response.data);
              }
            })
            .catch(function(error) {
            });
      })
    
    } 
    

    从上面代码看到,在发送请求前,把参数对象解析为字符串,这是一个很正常的操作!

    然后我们看看URLSearchParams对浏览器和手机系统的支持:URLSearchParams 详解
    拉倒最底下可以看到对手机浏览器的支持要求有点高

    D30490A3-D2D0-463A-B35E-1902301DFA68.png

    既然原因就是因为这个导致无法解析参数,从而无法发送请求,那么我们就可以换个方法了!
    方法一: 自己遍历循环对象,把对象参数拼接起来
    方法二:使用第三方插件,比如 qs ,可以npm install qs -Dyarn add qs,然后使用

    import Qs from 'qs'
    let searchStr = Qs.stringfy(options)
     axios.post(url, searchStr).xxxx
    

    因为这个问题是不会直接体现出来,需要自己一步一步的去验证代码,花了半天时间啊!实在有点坑!
    OK,问题解决了,希望对大家有帮战,也希望大家不要在趟这个坑

    相关文章

      网友评论

          本文标题:解决axios 使用 URLSearchParams解析参数,导

          本文链接:https://www.haomeiwen.com/subject/ypkroftx.html