使用 axios 实现 ajax 方案

最新推荐文章于 2024-06-19 20:31:41 发布

赵永盛

最新推荐文章于 2024-06-19 20:31:41 发布

阅读量4w

点赞数 1

分类专栏： axios 前端文章标签： axios ajax node webpack babel

本文链接：https://blog.csdn.net/fantian001/article/details/70193938

版权

本文介绍如何使用axios替代vue-resource实现ajax请求，包括项目配置、安装依赖、运行示例，深入探讨axios特性，并提供get、post等请求方法的使用示例，以及错误处理、取消请求和数据格式化等内容。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

赵永盛

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
使用 axios 实现 ajax 方案

使用 axios 实现 ajax 方案vue.js 自2.0版本已经不对 vue-resource 更新了，官方推荐使用 axios 解决方案。axios 使用了 Promise,而 jquery 自3.0 版本才支持 Promise,如果你只是想使用 jquery 的 ajax 的话，引入整个 jquery 是很大的负担，所以 axios 是一个很好的工具。知识点： 1.we...
复制链接

扫一扫

专栏目录