vue+axios自己踩过的坑

展开全文

axios的介绍就不用了吧，api有具体的介绍axios或者是axios中文；

主要讲的就是我自己在第一次使用axios中遇到的问题，及二次封装

先来说说二次封装，之前自己也是网上找了很多同学的封装，要么就是把post和get请求分开的，要么就是只大概写了一种的或者只是吧API又复制粘贴了的，都不太符合实际的使用,那就自己写呗

asxios的post和get一个传值是使用data，一个是使用params，我要直接调用二次封装的ajax根据不同的请求类型来使用data或者params，当初以为data和params是不能共存的，结果测试是可行的，贴代码吧

ajax: function (opt) {
  var opts = opt || {};

  if (!opts.url) {
    alert(接口都不写，想干嘛？');
    return false;
  }
  if (opts.type === undefined) {
    opts.type = 'post'
  }
  axios({
    method: opts.type,
    url: opts.url,
    // `params` 是即将与请求一起发送的 URL 参数
    // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
    params: (opts.type === "get") ? opts.data : {},
    // params:opts.data,

    // `data` 是作为请求主体被发送的数据
    // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
    // 在没有设置 `transformRequest` 时，必须是以下类型之一：
    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
    // - 浏览器专属：FormData, File, Blob
    // - Node 专属： Stream
    data: (opts.type === "post") ? qs.stringify(opts.data): {},
    headers: opts.headers || {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    baseURL: '你的接口地址/',
    // `transformRequest` 允许在向服务器发送前，修改请求数据(请求前处理)
    // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
    transformRequest: [function (data) {
      // 对 data 进行任意转换处理
      return data;
    }],
    // `transformResponse` 在传递给 then/catch 前，允许修改响应数据(请求返回的数据)
    transformResponse: [function (data) {
      // 对 data 进行任意转换处理
      return data;
    }],
    // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
    // 如果请求话费了超过 `timeout` 的时间，请求将被中断
    timeout: opts.time || 10 * 1000,
    //返回数据类型
    responseType: opts.dataType || 'json'
  }).then(function (res) {
    console.log(res);
    if (res.status == 200) {
      if (opts.success) {
        opts.success(res.data, res);
      }
    } else {
      alert(res.data.error);
    }
  }).catch(function (error) {
    //请求已发出，但服务器使用状态代码进行响应
    //落在2xx的范围之外
    console.log(error);
    if (opts.error) {
      opts.error(error);
    } else {
      //在设置触发错误的请求时发生了错误
      alert('出错了');
    }
    console.log(error.config);
  });

},

然后还有个地方要注意的就是这个

qs.stringify(opts.data)

为什么这么干呢，就是因为，在使用post请求时如果不使用qs.stringify()转的话，后台是拿不到数据的，这也是一个坑，踩了好久;

有不对的欢迎指正

江滩股王8年追涨停铁律“1272”曝光，震惊众人

仁恒机电 · 燨燚