您的位置:威尼斯官方网站 > 威尼斯官方网站 > axios的介绍就不用了吧

axios的介绍就不用了吧

发布时间:2020-01-02 18:07编辑:威尼斯官方网站浏览(159)

    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()转的话,后台是拿不到数据的,这也是一个坑,踩了好久;
    

     

    有不允许则的招待指正

     

    有不法则的接待指正

    本文由威尼斯官方网站发布于威尼斯官方网站,转载请注明出处:axios的介绍就不用了吧

    关键词:

上一篇:没有了

下一篇:可以用来验证Memcheck是否有误报