Question

我现在开始对纯粹的前端开发做出反应，包括HTML，CSS和一些jquery。所以我没有安装包的经验。我想用npm安装axios。

我从npm install axios开始，似乎有效。但我仍然收到错误消息＆＃34; axios未定义＆＃34;。我错过了什么？我是否必须在package.json中修改依赖项？如果是，我该怎么做呢？

的package.json

{
  "name": "first-webapp-react",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "watchify -v -d -t [ reactify --es6 ] main.js -o compiled.js",
    "build": "NODE_ENV=production browserify -t [ reactify --es6 ] main.js | uglifyjs > compiled.js"
  },
  "author": "BAGGID",
  "license": "MIT",
  "dependencies": {
    "moment": "^2.10.2",
    "react": "^0.13.2",
    "axios": "^0.15.3"
  },
  "devDependencies": {
    "browserify": "^9.0.8",
    "reactify": "^1.1.0",
    "uglify-js": "^2.4.20",
    "watchify": "^3.1.2"
  }
}

＆＃13;

var React = require('react');

var TopBar = require('./Top-bar');
var ProductPage = require('./Product-page');
var Test = require('./test');


var App = React.createClass({

  getInitialState: function() {
    return {
      page: 'SearchResult',
      jobs: []
    };    
  },

  componentDidMount: function() {
    var _this = this;
    this.serverRequest = 
      axios.get("http://codepen.io/jobs.json")
        .then(function(result) {    
          _this.setState({
            jobs: result.data.jobs
          });
        })
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

	render(){
    console.log('Person: ' + this.state.person);
		return (
			<div>
				<TopBar />		
        <ProductPage />
        <Test />
			</div>
		);
	}
});

module.exports = App;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>React Test</title>
	<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
	<link href="assets/css/baggid-standart.css" type="text/css" rel="stylesheet" />
	<link href="assets/css/login.css" type="text/css" rel="stylesheet" />
	<link href="assets/css/button-stacking.css" type="text/css" rel="stylesheet" />
</head>
<body>

	<div id="main">	
	</div>

	
	<script src="./compiled.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</body>
</html>

＆＃13;

Answer 1

您应该在使用之前尝试导入它。

import 'axios' from 'axios';

也是这样。

const axios = require('axios');

Answer 2

只需通过CDN安装即可在html文件中插入此代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

只需将此代码插入您的html文件即可。

所以这是你的html文件将如何

<!DOCTYPE html>
<html> <head lang="en"> 
<meta charset="UTF-8"> 
<title>React Test</title> 
<link href="maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/" type="text/css" rel="stylesheet" /> 
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> <div id="main">	your content here </div> 
<script src="compiled.js"></script> 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
</body> 
</html>

Answer 3

尝试使用

全局安装axios

$ npm install -g axios

Answer 4

查看这个简单示例，如何使用axios：

＆＃13;

var App = React.createClass({

  getInitialState: function() {
    return {
      page: 'SearchResult',
      jobs: []
    };    
  },

  componentDidMount: function() {
    var _this = this;
    this.serverRequest = 
      axios.get("http://codepen.io/jobs.json")
        .then(function(result) {    
           console.log('success');
          _this.setState({
            jobs: result.data.jobs
          });
        })
        .catch(e => console.log('error', e))
  },

  componentWillUnmount: function() {
      this.serverRequest.abort();
  },

  render: function(){
    console.log('Person: ');
    return (
	    <div>
	         Hello
	    </div>
    );
   }
});

ReactDOM.render(<App/>, document.getElementById('app'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id='app'/>

＆＃13;

使用npm安装包进行反应

4 个答案: