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

最新推荐文章于 2020-10-28 11:32:09 发布

duanjinlong、

最新推荐文章于 2020-10-28 11:32:09 发布

阅读量325

点赞数

分类专栏：代码文章标签： angular2 ionic2 百度翻译api

本文链接：https://blog.csdn.net/LLL_foever/article/details/89149967

版权

代码专栏收录该内容

36 篇文章 0 订阅

订阅专栏

参考百度翻译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之类的。

duanjinlong、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular2+ionic2调用百度翻译API程序

参考百度翻译API提供的相关文档，拟实现基于anguler2+ionic2框架的翻译程序在程序的实现过程中主要学习了以下几点：1.将JS示例程序移植到angular2框架中；2.angular2调用JS脚本；3.运用了jsonp进行网络请求。官网给出的是一个html格式的demo：<!doctype html><head> <met...
复制链接

扫一扫

专栏目录