ios 加载html ajax,使用 axios 实现 ajax 方案

使用 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

axios

因为使用了 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/

可以看到运行结果：