关于Axios直接上手用问题

最新推荐文章于 2025-06-10 17:10:24 发布

我不是郑正好啊

最新推荐文章于 2025-06-10 17:10:24 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue Axios javascript

本文链接：https://blog.youkuaiyun.com/zhengzhuang95/article/details/78113962

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文提供了一种简单高效的Axios实战教程，适用于新手快速上手。通过实例演示了如何配置Axios并发起HTTP请求，包括POST请求的具体实现及数据处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在网上找了好多关于Axios如何简单使用问题，网上大部分都是关于直接官网翻译的，或是ES6引用的，
我这里直接就可以新手直接上手，简单高效，拿来就用，没有其他的解释性，一目了然。

Axios下载地址：

https://unpkg.com/axios/dist/axios.min.js

直接上代码：

首先前台引用axios.min.js文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios测试</title>
</head>

<body>
    <script src="js/axios.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

然后在index.js文件进行实例创建：

//这是Axios的配置文件
//当创建实例的时候配置默认配置
var instance = axios.create({
    method: 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    baseURL: 'http://192.168.1.1/access/?service=',
    //transformRequest是你在data传输前进行数据处理，如果不处理你的数据会显示object.object
    transformRequest: [function (data) {
        // 对 data 进行任意转换处理
        let ret = '';
        for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
        };
        return ret;
    }]
});

实例创建完成后，就可以拿来进行使用：

instance.post(URL, data).then(function (res) {}).catch(function (err) {});

下面进行书写举例：

//data数据这样写也可以，上面的transformRequest对其进行了处理
var data = {
    pageNum: 1,
    pageSize: 10
}
//请求接口
instance.post('Help.GetList', data).then(function (res) {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});