使用 axios 实现 ajax 方案
vue.js 自2.0版本已经不对 vue-resource 更新了,官方推荐使用 axios 解决方案。axios 使用了 Promise,而 jquery 自3.0 版本才支持 Promise,如果你只是想使用 jquery 的 ajax 的话,引入整个 jquery 是很大的负担,所以 axios 是一个很好的工具。
知识点:
1.webpack
2.ES6
3.babel
4.node npm
5.eslint
6.axios
7.DOS基本命令
注意:需要使用 node环境,请先安装node,并学习 npm 的使用方法。
为了熟练操作,该文章中会使用一些DOS命令,很多人觉得window比linux方便,但是当你用习惯了linux命令的话,操作确实比window方便很多。
开始
创建项目目录
打开 DOS,切换到一个目录下,使用:
md axiosTest
建立空文件夹, 然后使用模糊匹配切换到创建的目录:
cd axios*
使用 npm init 创建 package.json 文件:
项目文件
创建 webpack.config.js 文件:
webpack.config.js
:
module.exports = {
entry: {
page1: './main'
},
output: {
path: __dirname + '/build',
filename: '[name].bundle.js'
},
module: {
loaders:[
{
test: /\.js$/,
loaders: ['babel-loader', 'eslint-loader'],
exclude: '/node_modules' /*排除该文件夹*/
}
]
}
}
同目录下建立 main.js
:
import app from './app';
同目录建立 app.js
:
import axios from 'axios';
//请求前拦截
axios.interceptors.request.use((config) => {
console.log("请求前拦截!");
return config;
}, (err) => {
return Promise.reject(err);
});
//发送一个 get 请求
axios.get('package.json')
.then( (res) => {
console.log(res);
})
.catch( (err) => {
console.log(err);
});
同目录建立 index.html
:
<html>
<head>
<title>axios</title>
<meta name="charset" content="utf8">
<script type="text/javascript" src="./build/page1.bundle.js"></script>
</head>
<body>
</body>
</html>
因为使用了 eslint, 所以编写 配置文件,同目录建立 .eslintrc
:
{
"parser": 'babel-eslint',
"rules": {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// http://eslint.org/docs/rules/comma-dangle
'comma-dangle': ['error', 'only-multiline'],
'semi': 0,
'eol-last': 2
}
}
安装必要模块
使用 npm install --save-dev XXX
安装以下模块:
- webpack
- webpack-dev-server
- babel-core
- babel-eslint
- babel-loader
- babel-preset-es2015
- babel-preset-stage-2
- eslint
- eslint-loader
axios
可以看到我们的 package.json 中已经有了安装的模块,继续在
scripts
中添加我们的编译和启动静态服务器的命令:
package.json
: