Question

我正在尝试使用Webpack，并从URL（给出标记的位置）获取数据后，用标记制作地图。现在，我正在尝试使用XMLHttpRequest对象从URL获取数据，该对象应该给我一个JSON对象，但是其中的数据有时是正确的，有时会丢失一些数据，并且我无法访问JSON对象的属性而且我无法解析它，因为我总是在1处收到解析错误无效字符。

这是我的index.js中的代码

internal class Foo { }
internal class IndexerClass
{
    public Bar this[Foo param]
    {
        get { return null; }
    }
}

这是我的webpack配置中的代码

function donnees(Jsonobjet)
{
console.log(Jsonobjet); //displaying the object in the console 
}


function main()
{
var client = new XMLHttpRequest();
var url = "https://opendata.paris.fr/api/records/1.0/search/?dataset=velib-disponibilite-en-temps-reel";
client.open("GET", url,true);
client.responseType = "json";
client.send();
client.onload = function()    
{
    var rep = client.response;//getting the data
    donnees(rep);
}


}

window.addEventListener('load',main);

这是我的package.json文件的代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCCSAssets = require('optimize-css-assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

var config = {
  context: path.resolve(__dirname, 'src'),
  entry: "./index.js",


 output: {
    path: path.resolve(__dirname, './public'),
    filename: 'assets/js/[name].js',
    library: 'myApp',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { 'targets': { 'browsers': '> .5% or last 3 versions' } }]
            ]
          }
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[sha512:hash:base64:7].[ext]',
            outputPath: 'assets/images/'
          }
        }]
      },
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[sha512:hash:base64:7].[ext]',
            outputPath: 'assets/fonts/'
          }
        }]
      },
      {
        test: /\.tpl\.html$/,
        exclude: /node_modules/,
        use: ['html-es6-template-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['public']),
    new MiniCssExtractPlugin({
      filename: 'assets/stylesheets/[name].css', chunkFilename: '[id].css'
    }),
    new HtmlWebpackPlugin({
      title: 'Carte vélib'
    })
  ]
}

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'eval'

    config.module.rules.push({
      test: /\.(sa|sc|c)ss$/,
      use: [
        'css-hot-loader',
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: '../../'
          }
        },
        { loader: 'css-loader' },
        { loader: 'resolve-url-loader' },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        }
      ]
    })

    config.devServer = {
      contentBase: path.resolve(__dirname, './public'),
      publicPath: 'http://localhost:8080/',
      historyApiFallback: true,
      inline: true,
      open: true,
      hot: true,
      overlay: true
    }
  }

  if (argv.mode === 'production') {
    config.devtool = 'source-map'

    config.module.rules.push({
      test: /\.(sa|sc|c)ss$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: '../../'
          }
        },
        { loader: 'css-loader' },
        { loader: 'resolve-url-loader' },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        }
      ]
    })
    config.plugins.push(new OptimizeCSSAssets())
  }

  return config
}

这是我有时获得的JSON文件的URL，它是正确的（使用firefox打开它并获得JSON文件的更好视图）

https://opendata.paris.fr/api/records/1.0/search/?dataset=velib-disponibilite-en-temps-reel

我已经尝试了几个小时来找出可能导致此问题的原因，但是我目前的解决方案已用尽。我想知道我的代码有什么问题

Answer 1

我设法使其正常工作，所以这里是index.js中修改后的代码

function donnees(Jsonobjet)
{
    console.log(Jsonobjet);
}


function main()
{
    var client = new XMLHttpRequest();
    var url = "https://opendata.paris.fr/api/records/1.0/search/?dataset=velib-disponibilite-en-temps-reel&sort=-lon";
    client.open("GET", url,true);
    client.responseType = "json";
    client.onload = function()
    {
        var rep = client.response;
        donnees(rep);
    }
    client.send(); //I put the send call after defining the onload function instead of before defining the onload function
}

window.addEventListener('load',main);

javascript http响应并不总是返回每个数据

1 个答案: