3

axios的content-type是自动设置的 - 大熊丨rapper

 2 years ago
source link: https://www.cnblogs.com/520BigBear/p/16630223.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

axios的content-type是自动设置的 - 大熊丨rapper - 博客园

一.  axios参数的传递方式

　   首先我们要知道  参数传递一般有两种，一种是 使用 params, 另一种是 data的方式,有很多的时候我们看到的前端代码是这样的。

　  1. get请求:

axios({
    method: 'GET',
    url: 'xxxxx',
    params: params,
  })
或者 
axios({
    method: 'GET',
    url: '/xxx?id=' + xxx,
  })

      2. post请求

axios({
    method: 'POST',
    url: '/xxxxx',
    data: params,
  })
  或者
 axios({
    method: 'POST',
    url: '/xxxxx',
    params: params,
  })

　3. params 的形式的传参 参数会被拼接到url上面(params 是查询参数，拼在 URL 问号后面的)   如下图: 

      

1263537-20220827091827427-534590062.png

    4. data形式传参, axios会自动处理设置Content-Type不需要手动设置

    

1263537-20220827092638926-501793262.png

      (1) 比如发送一个下面的请求, 会发现请求头的content-type是application/json;charset=UTF-8

axios({
        url: '/login',
        method: 'post',
        data: {email: 'xxxx', password: 123123}
})

        (2) 比如发送一个上传文件的请求formdata, 会发现请求头的content-type是multipart/form-data

let formData = new FormData()
formData.append('file', file)
axios({
        url: '/login',
        method: 'post',
        data: formData 
})

二 . 查看axios源码, 对比 data和params两种参数处理方法

      1. 处理data

　　在axios文件中 的 core/dispatchRequest.js 中:

          

1263537-20220827112556302-116383423.png

 　　     在 axios 的 default.js 中，有一个函数专门转换 data 参数的 :

            

1263537-20220827112636019-1914067939.png

              注意： 上面只是举例 data 传递参数的一种情况哈！其实data 也有在地址栏 上 拼接的情况，或者 是文件上传的等情况。太多了，这里 只是讲清楚使用的方式。

              2.  处理 params

         在axios文件中 的 adapt/ xhr.js 中，我们可以看到 :

              

1263537-20220827112847095-1616878094.png

                buildUrl 一些关键代码如下 ：

              

1263537-20220827112923513-927113497.png

参考链接 : https://blog.csdn.net/qq_41499782/article/details/118916901

                 https://segmentfault.com/q/1010000018679505?utm_source=sf-similar-question

                 https://segmentfault.com/q/1010000040731240

__EOF__

原文作者： 嘻哈丨大熊 原文链接： https://www.cnblogs.com/520BigBear/p/16630223.html 关于博主： 评论和私信会在第一时间回复。或者直接私信我。 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！ 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK