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

       
        
       

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

可以看到运行结果：