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

“这是我参与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，可以对数据进行各种形式的编码转换

数据放在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头：

注意：上传文件必须使用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
}
复制代码