Angular-Flask传输Protobuf数据(Flask系列1)

本文主要是讲述通过Angular向Flask通过restful发送Protobuf类型的二进制流数据和返回二进制流数据的具体过程，以及其中一些注意点。

Angular发送Protobuf类型Request

通过http发送post请求，几点注意点。

this.http.post(url,body,options).subscribe((response:any)=>{ })

1. post请求中的body直接赋值protobuf类型数据即可

2. options中需要定义'Content-Type': 'application/octet-stream'

   Angular获取并解析Protobuf类型Response

   Angular获取返回的Protobuf类型数据需要注意几点

   this.http.post(url,body,options).subscribe((response:any)=>{ })

3. response类型设置为any

4. options中定义responseType 为responseType: 'ArrayBuffer' as 'json',切记，无论什么返回类型，一定要添加as 'json'

5. 综上，利用Protobuf类型数据传输，Angular的options定义为：

   const httpOptions = {
         headers: new HttpHeaders({
           'Content-Type': 'application/octet-stream'
         }),
         responseType: 'ArrayBuffer' as 'json'
       };

6. 获取到返回的buffer数据之后，具体Protobuf的解析如下

   const data = GeoThinking.ML.catalog.QueryResponse.decode(new Uint8Array(result));

    GeoThinking.ML.catalog.QueryResponse是protobuf中定义的类型

Flask获取并解析ProtoBuf类型Request

后端flask框架获取解析Protobuf类型数据有几点注意点：

1. 前端所传输的数据通过request.data获取
2. 获取到的数据被flask二次编码，原ArrayBuffer类型的数据变为json格式的二进制数据，如图：
   
3. 通过对其重新遍历，转换格式为二进制数据。具体代码如下：

   d = x.decode('ASCii')
   requestJson=json.loads(d,object_pairs_hook=OrderedDict)
   tempList=[]
   for k,v in requestJson.items():
       tempList.append(v)
   tempList=bytes(tempList)        

   并通过实例化ProtoBuf的类型后，ParseFromString进行解码：

   ca = catalog_pb2.QueryRequest()
   ca.ParseFromString(bytes(tempList))

   Flask发送Protobuf类型Response

   对后端向前端发送Protobuf类型请求，需要定义headers：

   headers = {
           'Content-Type': 'application/octet-stream',
           'Access-Control-Allow-Headers': 'Content-Type',
           'Access-Control-Allow-Origin': '*',
           'Access-Control-Allow-Methods': 'POST,OPTIONS'
       }

   将'Content-Type'定义为'application/octet-stream'即可。