angular2+ionic2调用百度翻译API程序

参考百度翻译API提供的相关文档，拟实现基于anguler2+ionic2框架的翻译程序

在程序的实现过程中主要学习了以下几点：

1.将JS示例程序移植到angular2框架中；

2.angular2调用JS脚本；

3.运用了jsonp进行网络请求。

官网给出的是一个html格式的demo：

<!doctype html>
<head><meta charset="utf-8"/>
</head>
<body>
<div>可打开浏览器控制台查看结果</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./md5.js"></script>
<script type="text/javascript">
var appid = '2015063000000001';
var key = '12345678';
var salt = (new Date).getTime();
var query = 'apple';
// 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
var from = 'en';
var to = 'zh';
var str1 = appid + query + salt +key;
var sign = MD5(str1);
$.ajax({url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',type: 'get',dataType: 'jsonp',data: {q: query,appid: appid,salt: salt,from: from,to: to,sign: sign},success: function (data) {console.log(data);}
});</script>
</body>

里面用到了jquery的ajax请求和调用MD5加密算法，所以要将程序移植到angular2中，需要解决以上两个调用的问题。

示例程序首先调用了MD5加密算法对发送的数据加密（<script src="./md5.js"></script>），对于angular2，要么自己写一个函数实现MD5加密，要么调用demo自带的脚本ma5.js，为了多学一点知识，于是开启了angular调用JS脚本的探索之旅，看了网上很多文章，终于找到了一个比较好的解决方案：https://blog.csdn.net/xiekongxk/article/details/52233031。

1）首先新建一个.d.ts格式的脚本,里面声明要引用JS库里面定义的变量，变量名要保持一致

2）把MD5.JS脚本放在www目录下

然后在www/index.html中导入js

最后在需要用的ts文件里引用，就可以调用MD5.JS脚本中的主函数了

2.demo使用jquery.ajax进行网络请求，并且返回数据为jsonp，不是json，所以一开始我使用angular2中的http.get()请求会报如下错误：

将http.get()替换为jsonp.get()后，又会报以下错误：

网上找到了解决方案：https://segmentfault.com/a/1190000008345807

需要在参数中添加callback参数，同时callCount需要递增，即可解决问题。

完整代码如下：

      this.str1 =this.appid+this.query+this.salt+this.key;this.sign  = MD5(this.str1);let params = new URLSearchParams();params.append("q",this.query);params.append("from",this.from);params.append("to",this.to);params.append("appid",this.appid);params.append("salt",this.salt);params.append("sign",this.sign);let callback="__ng_jsonp__.__req"+this.callCount+".finished";params.set("callback", callback);this.callCount++;let options = new RequestOptions({search:params});this.jsonp.get(this.url,options).toPromise().then(response=>{let data = response.json();if(data.trans_result){this.result=data.trans_result[0].dst;console.log(this.result);}else if(data.error_code){console.log(data.error_msg);}}).catch(error=>{console.log(error);console.log("false");})

最后需要注意的几个小点：

1.转码问题：若需要翻译中文，首先要将中文进行utf-8编码。

2.参数名称：容易写错的参数名，例如把from写成了form之类的。

angular2+ionic2调用百度翻译API程序相关推荐

基于调用百度翻译API的简易翻译器（python）
基于调用百度翻译API的简易翻译器一.使用自己的百度账号登录百度翻译开放平台获取百度翻译API 使用您的百度账号登录百度翻译开放平台(http://api.fanyi.baidu.com): 注册成 ...
python百度翻译接口_python3 调用百度翻译API翻译英文
自行申请百度开发者账号import importlib,sys,urllib importlib.reload(sys) import urllib.request import json #导入js ...
【2019-07-23】]python3 把日语翻译为中文调用百度翻译API接口及API申请使用教程
点击申请百度翻译API,得到一个你自己的API账户. 点击查看申请教程,感谢教程原作者. API官网提供了一个python2的使用接口的demo还有详细的解释文档想用python3完成,代码几乎照搬 ...
python调用百度翻译-Python 调用百度翻译API
由于实习公司这边做的是日文app,有时要看看用户反馈,对于我这种五十音图都没记住的人,表示百度翻译确实还可以.但不想每次都复制粘贴啊,google被墙也是挺蛋疼的事,所以用python结合baidu ...
前端js调用百度翻译api接口
目录 1.到百度翻译开放平台注册自己的账号 2.编辑html代码,设计一个简易的页面 3.远程调用百度翻译api 4.完整代码 5.测试到百度翻译开放平台注册自己的账号 (1)进入网页:开放平台官网 ...
【新手】基于C++Qt5通过调用百度翻译API制作简易翻译工具
基于C++Qt5通过调用百度翻译API制作简易翻译工具目录基于C++Qt5通过调用百度翻译API制作简易翻译工具写在前面步骤: 1.注册百度翻译开放平台账号并开通翻译服务 2.下载安装Qt5和 ...
Pepper/Nao中级教程：第五章 Pepper/Nao机器人如何调用百度翻译API
关于Naoqi之家欢迎访问Naoqi之家,一个提供Pepper/Nao机器人中文开发手册的站点. http://www.naoqi.net 5.1 目标我希望让机器人做翻译,但是Naoqi自身是没 ...
Qt调用百度翻译api
参考Gitee某工程一.代码 //百度翻译 void CBaiduTranslater::translate(const QString &src, const QString from, ...
python调用百度翻译-python3调用百度翻译API实时翻译的实例代码
python3调用百度翻译API实现实时翻译今天需要做一个翻译的工具,找到之前写过的有道翻译,已经不能用了,最后看到百度翻译还不错,不过官方版本是Python2,我需要Python3,就自己写了一个 ...