ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 操作系统 >> Windows 7教程 >> vue vue+axios自己踩过的坑

vue vue+axios自己踩过的坑

来源:网络整理     时间:2017-11-28     关键词:vue

本篇文章主要介绍了"vue vue+axios自己踩过的坑",主要涉及到vue方面的内容,对于Windows 7教程感兴趣的同学可以参考一下: axios的介绍就不用了吧,api有具体的介绍axios或者是axios中文;主要讲的就是我自己在第一次使用axios中遇到的问题,及二次封装先来说说二次封装,...

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

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

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

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

 1 ajax: function (opt) {
 2var opts = opt || {};
 3 4if (!opts.url) {
 5     alert(接口都不写,想干嘛?');
 6    return false;
 7  }
 8  if (opts.type === undefined) {
 9     opts.type = 'post'
10  }
11  axios({
12    method: opts.type,
13    url: opts.url,
14    // `params` 是即将与请求一起发送的 URL 参数
15    // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
16    params: (opts.type === "get") ? opts.data : {},
17    // params:opts.data,
1819    // `data` 是作为请求主体被发送的数据
20     // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
21    // 在没有设置 `transformRequest` 时,必须是以下类型之一:
22    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
23    // - 浏览器专属:FormData, File, Blob
24    // - Node 专属: Stream
25    data: (opts.type === "post") ? opts.data : {},
26    headers: opts.headers || {
27       'Content-Type': 'application/x-www-form-urlencoded'
28    },
29// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。30// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL31     baseURL: '你的接口地址/',
32// `transformRequest` 允许在向服务器发送前,修改请求数据(请求前处理)33// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法34// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream35     transformRequest: [function (data) {
36// 对 data 进行任意转换处理37       data = qs.stringify(data);
38return data;
39    }],
40// `transformResponse` 在传递给 then/catch 前,允许修改响应数据(请求返回的数据)41     transformResponse: [function (data) {
42// 对 data 进行任意转换处理43return data;
44    }],
45// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)46// 如果请求话费了超过 `timeout` 的时间,请求将被中断47     timeout: opts.time || 10 * 1000,
48//返回数据类型49     responseType: opts.dataType || 'json'
50   }).then(function (res) {
51    console.log(res);
52if (res.status == 200) {
53if (opts.success) {
54        opts.success(res.data, res);
55      }
56     } else {
57      alert(res.data.error);
58    }
59   }).catch(function (error) {
60//请求已发出,但服务器使用状态代码进行响应61//落在2xx的范围之外62    console.log(error);
63if (opts.error) {
64      opts.error(error);
65     } else {
66//在设置触发错误的请求时发生了错误67       alert('出错了');
68    }
69    console.log(error.config);
70  });
7172 },

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

  transformRequest: [function (data) {
      // 对 data 进行任意转换处理
      data = qs.stringify(data);
      return data;
    }],

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

有不对的欢迎指正

以上就介绍了vue vue+axios自己踩过的坑,包括了vue方面的内容,希望对Windows 7教程有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_4510000.html

vue相关图片

vue相关文章