前端请求后端接口大汇总,让前端不再受委屈! (一、 数据放在哪发)

7,036 阅读3分钟

这是我参与8月更文挑战的第13天,活动详情查看:8月更文挑战

本系列主要总结前端请求后端接口的一些知识。希望你看完之后,在和后端对接接口时可以如鱼得水。

为了写这系列的文章,我使用Nodejs编写了两个测试接口

//部署IP:
http://111.229.14.189/gk-api

//接口1.返回普通数据   返回前端发送的请求头请求体等信息
/util/test

//接口2.返回文件流    
/util/download?file=fileName

第一个接口会返回前端发送的一些数据信息,可以访问一下试一下:http://111.229.14.189/gk-api/util/test?id=123

第二个接口会返回一个文件流,也可以试一下:http://111.229.14.189/gk-api/util/download?file=1.jpg

本文主要讲:数据放在哪里发送 以及放在各处发送的数据格式

总的来说,数据可以放的位置有三个

  • URL
  • Http Header
  • Http Body

数据放在URL中发送

数据放在URL中发送,又有两种形式:

//方式1 发送请求时使用模板字符串拼接参数 
/user/:id

//方式2
/user?id=xxx

这两种形式的数据格式都是URL编码,即application/x-www-form-urlencoded

推荐一个浏览器插件FeHelper,可以对数据进行各种形式的编码转换

image.png

数据放在header中发送

放在header中的数据,一般为自定义的请求头,例如token,uid等字段

token:Beard xxxxjdjfj
uid:1

这里有个注意事项,放在header中的数据一定不要出现中文,出现中文必报错

如果需要传输中文,发放方需要使用URLEncoder.encode(“我是汉字”,"UTF-8") 进行编码,接收方需要使用URLDecoder.decode("待解析字符串", "UTF-8")进行解码

数据放在body中发送(重点)

放在body中发送的数据的格式通过http请求头中Content-Type字段进行区分(后端判断发送的数据是啥格式的就通过Content-Type字段)

Content-Type有很多类型,主要用到的有以下三种,每种对应一种数据格式(数据组织的形式)

//application/json  
{"name":"Jack","pass":"*****"}
//application/x-www-form-urlencoded
name=Jack&pass=*****
//multipart/form-data; boundary=----WebKitFormBoundary2mQN2wSPoRh4Wt1L
let formdata=new FormData()

在浏览器中查看Content-Type头: image.png

注意:上传文件必须使用multipart/form-data,其他的接口具体使用哪种需要看后端的规定,其中前两种是可以相互转换的:

application/json 转成 application/x-www-form-urlencoded

// {"name":"Jack","pass":"*****"}  -> name=Jack&pass=*****
//遍历对象生成字符串即可
/**
 * 对象转化为url参数
 * @param {*} obj
 */
export function getParams(obj) {
    return Object.keys(obj)
        .map(function(k) {
            return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])
        })
        .join('&')
}

x-www-form-urlencoded 转成 json

//name=Jack&pass=*****  -> {"name":"Jack","pass":"*****"}
function getObjByUrl(str){
  return   Object.fromEntries(new URLSearchParams(str));
}
//getObjByUrl('a=b&name=xxx%20djdj')


在上传文件时,为了简化代码,对象也是可以转成formdata的,方法如下:

/**
 * 对象转化为formdata {file:file,id:xxx,name:xxx}-> FormData{}
 * @param {Object} object
 */

 export function getFormData(object) {
    const formData = new FormData()
    Object.keys(object).forEach(key => {
        const value = object[key]
        if (Array.isArray(value)) {
            value.forEach((subValue, i) =>
                formData.append(key + `[${i}]`, subValue)
            )
        } else {
            formData.append(key, object[key])
        }
    })
    return formData
}

下篇说:

前端发送数据请求的工具,即原生的XMLHTTPRequest Fetch和封装的框架axios , 以及每种工具如何在URL中,Header中,Body存放数据并发送