使用 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("请求前拦截！");
returnconfig;
}, (err) => {
returnPromise.reject(err);
});
//发送一个 get 请求
axios.get('package.json')
.then( (res) => {
console.log(res);
})
.catch( (err) => {
console.log(err);
});
同目录建立 index.html:
axios axios axios axios axios
<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: {
"name": "axios_test",
"version": "1.0.0",
"description": "axios test",
"main": "index.js",
"scripts": { "server":"webpack --progress --colors && webpack-dev-server --hot --watch --port 8086"},
"keywords": [
"axios"
],
"author": "zhao",
"license": "MIT",
"devDependencies": {
"axios":"^0.16.1",
"babel-core":"^6.24.1",
"babel-eslint":"^7.2.2",
"babel-loader":"^6.4.1",
"babel-preset-es2015":"^6.24.1",
"babel-preset-stage-2":"^6.24.1",
"eslint":"^3.19.0",
"eslint-loader":"^1.7.1",
"webpack":"^2.4.1",
"webpack-dev-server":"^2.4.2"
}
}
运行
在 DOS 中对应工程目录下输入：
npm run server
项目开始编译及启动服务器：
在浏览器输入：
http://localhost:8086/
可以看到运行结果：
