将speedtest.net API与React Native一起使用

时间:2018-08-17 00:26:12

标签: javascript android react-native

我正在创建一个Android React Native应用程序,并尝试使用speedtest.net api来获取移动设备的上载和下载速度。但是,当我尝试将库集成到React Native中时,尝试执行const test = speedTest({maxTime: 5000, serverId : "7334"});

时出现以下错误
  

可能的未处理的承诺拒绝(标识:0):TypeError:网络   请求失败TypeError:网络请求失败       在XMLHttpRequest.xhr.onerror       在XMLHttpRequest.dispatchEvent       在XMLHttpRequest.setReadyState       在XMLHttpRequest .__ didCompleteResponse       在blob:http://localhost:8081/b1cfcde4-0ef7-4805-bd16-22849a1db8e3:17594:47       在RCTDeviceEventEmitter.emit       在MessageQueue .__ callFunction       在blob:http://localhost:8081/b1cfcde4-0ef7-4805-bd16-22849a1db8e3:2156:17       在MessageQueue .__ guardSafe       在MessageQueue.callFunctionReturnFlushedQueue

     

可能的未处理的承诺拒绝(标识:1):TypeError:   分配源在原型链上有一个可枚举的密钥。是   您试图分配原型属性?我们不允许这样做,因为   是我们不支持的极端情况。此错误是一种表现   优化且不符合规范。 TypeError:的来源之一   在原型链上,assign有一个可枚举的密钥。你在努力吗   分配原型属性?我们不允许这样做,因为这是一个优势   我们不支持的情况。此错误是性能优化   且不符合规范。       在Object.assign       在Object.request       在Object.https.get       在getHttp       在getXML       在nextServer       在gotServers       在blob:http://localhost:8081/b1cfcde4-0ef7-4805-bd16-22849a1db8e3:87345:24       在module.exports中。       在module.exports中。

实际上,在此之前,我什至尝试将speedtest npm模块添加到React Native时遇到麻烦,但出现500错误:

  

错误:无法从以下位置解析模块url   C:\Users\user\Documents\mobileapp\node_modules\speedtest-net\index.js:   急速模块图中不存在模块url

我在React Native应用中添加的代码行:var speedTest = require('speedtest-net');

我设法找到this article来解决此问题,但是现在这是我遇到的第一个错误...如何在我的React Native应用程序中正确使用npm模块,而不会遇到所有这些错误?是否有更好的方法将speedtest.net npm模块集成到我的React Native应用程序中?这是我的代码:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

//using the node module
const speedTest = require('speedtest-net');

//using the instructions from the article
const speedTest = require('./speedtest');
const test = speedTest({maxTime: 5000});

type Props = {};
export default class App extends Component<Props> {
  constructor()  {
    super();
  }

  componentWillMount() {
    test.on('downloadspeed', speed => {
       console.log('Download speed:', speed.toFixed(2));
   });

    test.on('uploadspeed', speed => {
       console.log('Upload speed:',(speed * 125).toFixed(2),'KB/s');
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

我也尝试单独测试该API,并且效果很好。只是当我尝试使用React Native实现API时,我遇到了所有这些问题。这是我其他js文件的代码如下:

var speedTest = require('speedtest-net');
var test = speedTest({maxTime: 5000, serverId : "7334"});
var http = require('http');

// test.on('data', data => {
//   console.log(data);
// });

// test.on('error', err => {
//   console.error(err);
// });

test.on('downloadspeed', speed => {
  console.log('Download speed:', speed.toFixed(2));
});

test.on('uploadspeed', speed => {
  console.log('Upload speed:',(speed * 125).toFixed(2),'KB/s');
})

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('Hello World!');
}).listen(8080);

0 个答案:

没有答案