axios的介绍就不用了吧,api有具体的介绍axios或者是axios中文;
主要讲的就是我自己在第一次使用axios中遇到的问题,及二次封装
先来说说二次封装,之前自己也是网上找了很多同学的封装,要么就是把post和get请求分开的,要么就是只大概写了一种的或者只是吧API又复制粘贴了的,都不太符合实际的使用,那就自己写呗
asxios的post和get一个传值是使用data,一个是使用params,我要直接调用二次封装的ajax根据不同的请求类型来使用data或者params,当初以为data和params是不能共存的,结果测试是可行的,贴代码吧
1 ajax: function (opt) { 2 var opts = opt || {}; 3 4 if (!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, 18 19 // `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") ? qs.stringify(opts.data) : {}, 26 headers: opts.headers || { 27 'Content-Type': 'application/x-www-form-urlencoded' 28 }, 29 // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。 30 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL 31 baseURL: '你的接口地址/', 32 // `transformRequest` 允许在向服务器发送前,修改请求数据(请求前处理) 33 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 34 // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream 35 transformRequest: [function (data) { 36 // 对 data 进行任意转换处理38 return data; 39 }], 40 // `transformResponse` 在传递给 then/catch 前,允许修改响应数据(请求返回的数据) 41 transformResponse: [function (data) { 42 // 对 data 进行任意转换处理 43 return 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); 52 if (res.status == 200) { 53 if (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); 63 if (opts.error) { 64 opts.error(error); 65 } else { 66 //在设置触发错误的请求时发生了错误 67 alert('出错了'); 68 } 69 console.log(error.config); 70 }); 71 72 },
然后还有个地方要注意的就是这个
qs.stringify(opts.data)
为什么这么干呢,就是因为,在使用post请求时如果不使用qs.stringify()转的话,后台是拿不到数据的,这也是一个坑,踩了好久;
有不对的欢迎指正
有不对的欢迎指正