Ajax入门以及Axios的详细使用（含Promise）

疝镜泛 · 2025-6-6 10:10:35

1. 概述

1.1 是什么

Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
Ajax 不是新的编程语言，而是一种用于创建快速动态网页的技术
Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，使网页实现异步更新
传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页
Ajax 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行
XMLHttpRequest只是实现 Ajax 的一种方式

1.2 为什么

以前数据都是写在代码里固定的, 无法随时变化
现在数据可以从服务器上进行获取，让数据变活

1.3 入门程序

需求：从服务器获取省份列表数据，展示到页面上
步骤：
- 引入 axios
1. [/code]
2. [list]
3. [*]基本语法
4. [/list][code]axios({
5. url: "目标资源地址",
6. }).then(result => {
7. // 对服务器返回的数据做后续处理
8. });
复制代码
示例

[/code][size=5]2. axios[/size]
[size=4]2.1 URL[/size]
[list]
[*][b]URL：[/b]统一资源定位符，简称网址，用于定位网络中的资源（网页，图片，数据，视频，音频等）
[*][b]组成：[/b]协议，域名，资源路径（比较重要的三部分）
[*][b]http 协议：[/b]超文本传输协议，规定了浏览器和服务器传递数据的格式
[*][b]域名：[/b]标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，需要知道它的域名
[*][b]资源路径：[/b]一个服务器内有多个资源，用于标识你要访问的资源具体的位置
[/list][align=center] [/align]
[list]
[*][b]查询参数：[/b]携带给服务器额外信息，让服务器返回想要的某一部分数据而不是全部数据
[list]
[*]格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
[*]参数名一般是后端规定的，值前端看情况传递即可
[/list]
[*]axios 如何携带查询参数？
[/list][code]axios({
url: "目标资源地址",
params: {
参数名: 值,
},
}).then(result => {
// 对服务器返回的数据做后续处理
});

复制代码

示例 1：获取“河北省”下属的城市列表

[/code]
[list]
[*]示例 2：根据输入的省份名字和城市名字，查询下属地区列表
[/list][align=center] [/align]
[code]<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<form id="editForm" >
<form action="javascript:;" >
<input type="text" name="uname" />
<br />
<input type="text" name="pwd" />
<br />
<input type="button" value="提交" />
</form> <label >省份名字</label>
<input type="text" value="北京" name="province" placeholder="请输入省份名称" />
<form action="javascript:;" >
<input type="text" name="uname" />
<br />
<input type="text" name="pwd" />
<br />
<input type="button" value="提交" />
</form>
<label >城市名字</label>
<input type="text" value="北京市" name="city" placeholder="请输入城市名称" />
</form>
<button type="button" >查询</button>
<br />
<br />
<p>地区列表:</p>
<ul >
<form action="javascript:;" >
<input type="text" name="uname" />
<br />
<input type="text" name="pwd" />
<br />
<input type="button" value="提交" />
</form></ul>

复制代码

2.2 数据提交

常用请求方法

请求方法操作GET获取数据（默认请求方式）POST提交数据PUT修改数据（全部）DELETE删除数据PATCH修改数据（部分）

axios 如何提交数据到服务器

axios({
url: "目标资源地址",
method: "请求方法",
data: {
参数名: 值,
},
}).then(result => {
// 对服务器返回的数据做后续处理
});

复制代码

示例：注册账号，提交用户名和密码到服务器保存

<button><button>点击注册</button></button>

复制代码

2.3 axios 错误处理

axios({
// ...请求选项
})
.then(result => {
// 处理成功数据
})
.catch(error => {
// 处理失败错误
});

复制代码

示例：

<button><button>点击注册</button></button>

复制代码

2.4 案例-用户登录

样式

[/code]
[list]
[*]框架
[/list][code] <h3>欢迎-登录</h3>
<form>
<label for="username" >账号名</label>
<input type="text" />
<label for="password" >密码</label>
<input type="password" />
<button type="button" >登录</button>
</form>

复制代码

2.5 form-serialize 插件

快速收集目标表单范围内表单元素的值

引入 form-serialize 插件
使用 serialize 函数
- 参数 1：要获取的 form 表单标签对象（要求表单元素有 name 属性，用来作为收集的数据中属性名）
- 参数 2：配置对象
  - hash：
    - true - 收集出来的是一个 JS 对象
    - false - 收集出来的是一个查询字符串
  - empty：
    - true - 收集空值
    - false - 不收集空值
示例：收集登录表单里用户名和密码

<form action="javascript:;" >
<input type="text" name="uname" />
<br />
<input type="text" name="pwd" />
<br />
<input type="button" value="提交" />
</form>

复制代码

2.6 Bootstrap 弹框

2.6.1 属性控制

引入 bootstrap.css 和 bootstrap.js
准备弹框标签，确认结构（可以从 Bootstrap 官方文档的 Modal 里复制基础例子）- 运行到网页后，逐一对应标签和弹框每个部分对应关系
通过自定义属性，通知弹框的显示和隐藏，语法如下：

<button data-bs-toggle="modal" data-bs-target="css选择器">显示弹框</button>
<button data-bs-dismiss="modal">Close</button>

复制代码

代码实现

<button type="button" data-bs-toggle="modal" data-bs-target=".mybox">显示弹框</button>
<h5 >Modal title</h5>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
<p>Modal body text goes here.</p>
<button type="button" data-bs-dismiss="modal">Close</button>
<button type="button" >Save changes</button>

复制代码

2.6.2 js 控制

为什么需要 js 方式控制？
- 当显示/隐藏之前，需要执行一些 JS 逻辑代码，就需要引入 JS 控制弹框显示/隐藏的方式
例如：
- 点击编辑姓名按钮，在弹框显示之前，在输入框填入默认姓名
- 点击保存按钮，在弹框隐藏之前，获取用户填入的名字并打印

语法

// 创建弹框对象
const modalDom = document.querySelector("css选择器");
const modal = new bootstrap.Modal(modelDom);
// 显示弹框
modal.show();
// 隐藏弹框
modal.hide();

复制代码

示例

<button type="button" >编辑姓名</button>
<h5 >请输入姓名</h5>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
<form action="">
姓名：
<input type="text" />
</form>
<button type="button" data-bs-dismiss="modal">取消</button>
<button type="button" >保存</button>

复制代码

2.7 案例-图书管理

黑马接口文档
结构

<h3>图书管理</h3>
<button type="button" data-bs-toggle="modal" data-bs-target=".add-modal">
+ 添加
</button>
<table >
<thead >
<tr>
<th >序号</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th >操作</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
添加图书
<button type="button" aria-label="Close" data-bs-dismiss="modal"></button>
<form >
<label for="bookname" >书名</label>
<input type="text" placeholder="请输入书籍名称" name="bookname" />
<label for="author" >作者</label>
<input type="text" placeholder="请输入作者名称" name="author" />
<label for="publisher" >出版社</label>
<input type="text" placeholder="请输入出版社名称" name="publisher" />
</form>
<button type="button" data-bs-dismiss="modal">取消</button>
<button type="button" >保存</button>
编辑图书
<button type="button" aria-label="Close" data-bs-dismiss="modal"></button>
<form >
<input type="hidden" name="id" />
<label for="bookname" >书名</label>
<input type="text" placeholder="请输入书籍名称" name="bookname" />
<label for="author" >作者</label>
<input type="text" placeholder="请输入作者名称" name="author" />
<label for="publisher" >出版社</label>
<input type="text" placeholder="请输入出版社名称" name="publisher" />
</form>
<button type="button" data-bs-dismiss="modal">取消</button>
<button type="button" >修改</button>

复制代码

index.js
渲染图书列表

/**
* 目标1：渲染图书列表
* 1.1 获取数据
* 1.2 渲染数据
*/
const creator = "老李";
function getBooksList() {
// 1.1 获取数据
axios({
url: "http://hmajax.itheima.net/api/books",
params: {
creator,
},
}).then(result => {
// console.log(result.data.data)
// 1.2 渲染数据
const list = result.data.data
.map((item, index) => {
return `
<tr>
<td>${index + 1}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td data-id=${item.id}>
删除
编辑
</td>
</tr>
`;
})
.join("");
document.querySelector(".list").innerHTML = list;
});
}
getBooksList();

复制代码

新增图书

/**
* 目标2：新增图书
* 2.1新增弹框->显示和隐藏
* 2.2收集表单数据，并提交到服务器保存
* 2.3刷新图书列表
*/
const addModalDom = document.querySelector(".add-modal");
const addModal = new bootstrap.Modal(addModalDom);
// 2.1 新增弹框->显示和隐藏
document.querySelector(".add-btn").addEventListener("click", () => {
// 2.2 获取输入框的数据
const addForm = document.querySelector(".add-form");
const formData = serialize(addForm, { hash: true, empty: true });
console.log(formData);
// 2.3 提交到服务器保存
axios({
url: "http://hmajax.itheima.net/api/books",
method: "post",
data: {
...formData,
creator,
},
}).then(result => {
console.log(result);
// 2.4 重新渲染页面
getBooksList();
// 重置表单
addForm.reset();
// 点击保存，隐藏模态框
addModal.hide();
});
});

复制代码

删除图书

/**
* 目标3：删除图书
* 3.1删除元素绑定点击事件->获取图书id
* 3.2调用删除接口
* 3.3刷新图书列表
*/
// 3.1 删除元素绑定点击事件（事件委托）->获取图书id
document.querySelector(".list").addEventListener("click", e => {
if (e.target.classList.contains("del")) {
const theId = e.target.parentNode.dataset.id;
// 3.2 调用删除接口
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`,
method: "delete",
}).then(() => {
// 3.3 刷新图书列表
getBooksList();
});
}
});

复制代码

编辑图书

/**
* 目标4：编辑图书
* 4.1编辑弹框->显示和隐藏
* 4.2获取当前编辑图书数据->回显到编辑表单中
* 4.3提交保存修改，并刷新列表
*/
const editModalDom = document.querySelector(".edit-modal");
const editModal = new bootstrap.Modal(editModalDom);
document.querySelector(".list").addEventListener("click", e => {
if (e.target.classList.contains("edit")) {
const theId = e.target.parentNode.dataset.id;
// 4.2 获取当前编辑图书数据->回显到编辑表单中
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`,
method: "get",
}).then(result => {
// 数据对象"属性"和标签"类名"一致
// 遍历数据对象，使用属性去获取对应的标签，快速赋值
const bookObj = result.data.data;
// console.log(bookObj)
const keys = Object.keys(bookObj);
keys.forEach(key => {
document.querySelector(`.edit-form .${key}`).value = bookObj[key];
});
});
// 4.1 编辑弹框->显示和隐藏
editModal.show();
}
});
document.querySelector(".edit-btn").addEventListener("click", () => {
const editForm = document.querySelector(".edit-form");
const editData = serialize(editForm, { hash: true, empty: true });
// 4.3 提交保存修改，并刷新列表
axios({
url: `http://hmajax.itheima.net/api/books/${editData.id}`,
method: "put",
data: {
...editData,
creator,
},
}).then(() => {
getBooksList();
});
editModal.hide();
});

复制代码

总结
- 渲染列表（查）
  - 获取数据
  - 渲染数据
- 新增图书（增）
  - 弹框（显示/隐藏）
  - 收集数据&提交保存
  - 刷新页面列表
- 删除图书（删）
  - 绑定点击事件（获取要删除的图书 id）
  - 调用删除接口（让服务器删除此数据）
  - 成功后重新获取并刷新列表
- 编辑图书（改）
  - 弹框（显示/隐藏）
  - 表单（数据回显）
  - 点击修改收集数据，提交到服务器保存
  - 重新获取并刷新列表

2.8 图片上传

把本地的图片上传到网页上显示

实现步骤
- 获取图片文件对象：e.target.files[0]
- 使用 FormData 表单数据对象装入
  1. const fd = new FormData();
  2. fd.append(参数名, 值);
  复制代码
- 提交表单数据对象，使用服务器返回图片 url 网址

<input type="file" />
<img src="" alt="" />

复制代码

示例：更换背景图片

<ul>
<li>免费教程</li>
<li>原创书籍</li>
<li>
教研团队
</li>
<li>
校区汇总
</li>
<li>报名流程</li>
<li>项目信息站</li>
<li>技术社区</li>
</ul>
<label for="bg">更换背景</label>
<input type="file" id="bg" />
<img src="https://www.itheima.com/images/logo.png" alt="" />
<input type="text" />
<button>搜索一下</button>

复制代码

index.js

document.querySelector(".bg-ipt").addEventListener("change", e => {
// 1. 选择图片上传，设置body背景
const fd = new FormData();
fd.append("img", e.target.files[0]);
axios({
url: "http://hmajax.itheima.net/api/uploadimg",
method: "post",
data: fd,
}).then(result => {
// console.log(result)
const imgUrl = result.data.data.url;
document.body.style.backgroundImage = `url(${imgUrl})`;
// 2. 上传成功时，"保存"图片url网址
localStorage.setItem("bgImg", imgUrl);
});
});
// 3. 网页运行后，获取url网址使用
const imgUrl = localStorage.getItem("bgImg");
document.body.style.backgroundImage = `url(${imgUrl})`;

复制代码

2.9 案例-个人信息设置

结构

操作成功
<ul >
<li >基本设置</li>
<li>安全设置</li>
<li>账号绑定</li>
<li>新消息通知</li>
</ul>
<h3 >基本设置</h3>
<form action="javascript:;">
<label for="email">邮箱</label>
<input id="email" name="email" type="text" placeholder="请输入邮箱" autocomplete="off">
<label for="nickname">昵称</label>
<input id="nickname" name="nickname" type="text" placeholder="请输入昵称" autocomplete="off">
<label>性别</label>
<label ><input type="radio" name="gender" value="0">男</label>
<label ><input type="radio" name="gender" value="1">女</label>
<label for="desc">个人简介</label>
<textarea id="desc" name="desc" placeholder="请输入个人简介" cols="20" rows="10" autocomplete="off"></textarea>
<button >提交</button>
</form>
<h4 >头像</h3>
<img src="https://www.cnblogs.com/./img/头像.png" alt="">
<label for="upload">更换头像</label>
<input id="upload" type="file" >

复制代码

index.js
信息渲染

/**
* 目标1：信息渲染
* 1.1 获取用户的数据
* 1.2 回显数据到标签上
* */
const creator = "小明";
axios({
url: "http://hmajax.itheima.net/api/settings",
params: {
creator,
},
}).then(result => {
// console.log(result.data.data)
const userObj = result.data.data;
const keys = Object.keys(userObj);
keys.forEach(key => {
// 头像和性别比较特殊，需要单独处理
if (key === "avatar") {
document.querySelector(".prew").src = userObj[key];
} else if (key === "gender") {
const gRadioList = document.querySelectorAll(".gender");
// 0男，1女，刚好与数组下标对应
const gNum = userObj[key];
gRadioList[gNum].checked = true;
} else {
document.querySelector(`.${key}`).value = userObj[key];
}
});
});

复制代码

修改头像

/**
* 目标2：修改头像
* 2.1 获取头像文件
* 2.2 提交服务器并更新头像
*/
document.querySelector(".upload").addEventListener("change", e => {
const fd = new FormData();
fd.append("img", e.target.files[0]);
fd.append("creator", creator);
axios({
url: "http://hmajax.itheima.net/api/avatar",
method: "put",
data: fd,
}).then(result => {
document.querySelector(".prew").src = result.data.data.avatar;
});
});

复制代码

修改数据，并提示

/**
* 目标3：提交表单
* 3.1 收集表单信息
* 3.2 交到服务器保存
*/
/**
* 目标4：结果提示
* 4.1 创建toast对象
* 4.2 调用show方法->显示提示框
*/
document.querySelector(".submit").addEventListener("click", () => {
// 3.1 收集表单信息
const form = document.querySelector(".user-form");
const formData = serialize(form, { hash: true, empty: true });
formData.creator = creator;
formData.gender = +formData.gender;
// 3.2 提交到服务器保存
axios({
url: "http://hmajax.itheima.net/api/settings",
method: "put",
data: formData,
}).then(result => {
// 4.1 创建toast对象
const toastDom = document.querySelector(".my-toast");
const toast = new bootstrap.Toast(toastDom);
// 4.2 调用show方法->显示提示框
toast.show();
});
});

复制代码

2.10 请求方式别名

为了方便起见，已经为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])

复制代码

注：在使用别名方法时， url、method、data 这些属性都不必在配置中指定

2.11 Axios API

2.11.1 axios 实例

可以使用自定义配置新建一个实例

const instance = axios.create({
baseURL: "https://some-domain.com/api/",
timeout: 1000,
headers: { "X-Custom-Header": "foobar" },
});

复制代码

一些实例方法
- axios#request(config)
- axios#get(url[, config])
- axios#delete(url[, config])
- axios#head(url[, config])
- axios#options(url[, config])
- axios#post(url[, data[, config]])
- axios#put(url[, data[, config]])
- axios#patch(url[, data[, config]])
- axios#getUri([config])

2.11.2 请求配置

这些是创建请求时可以用的配置选项，只有url是必需的
若没指定method，请求默认使用GET

{
// url：用于请求的服务器URL
url: '/user',
// method：创建请求时使用的方法，默认为get
method: 'get',
// baseURL：自动加在url前面，通过它可以传递相对地址
baseURL: 'https://some-domain.com/api/',
// transformRequest：允许在向服务器发送前，修改请求数据
// 它只能用于'PUT', 'POST'和'PATCH'这几个请求方法
// 数组中最后一个函数必须返回一个字符串，一个Buffer实例，ArrayBuffer，FormData或Stream
// 可以修改请求头
transformRequest: [function (data, headers) {
// 对发送的 data 进行任意转换处理
return data;
}],
// transformResponse：在传递给then/catch前，允许修改响应数据
transformResponse: [function (data) {
// 对接收的 data 进行任意转换处理
return data;
}],
// 自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// params：与请求一起发送的URL参数
// 必须是一个简单对象或URLSearchParams对象
params: {
ID: 12345
},
// data：作为请求体被发送的数据
// 仅适用'PUT', 'POST', 'DELETE'和'PATCH'请求方法
// 在没有设置`transformRequest`时，则必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属: FormData, File, Blob
// - Node 专属: Stream, Buffer
data: {
firstName: 'Fred'
},
// 发送请求体数据的可选语法
// 请求方式 post
// 只有 value 会被发送，key 则不会
data: 'Country=Brasil&City=Belo Horizonte',
// timeout：指定请求超时的毫秒数
// 如果请求时间超过`timeout`的值，则请求会被中断，默认为0，表示永不超时
timeout: 1000,
// withCredentials：表示跨域请求时是否需要使用凭证，默认false
withCredentials: false,
// adapter：允许自定义处理请求，这使测试更加容易
// 返回一个`promise`并提供一个有效的响应（参见 lib/adapters/README.md）
adapter: function (config) {
/* ... */
},
// auth：HTTP Basic Auth
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// responseType：浏览器将要响应的数据类型
// 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
// 浏览器专属：'blob'
responseType: 'json', // 默认值
// responseEncoding：用于解码响应的编码 (Node.js专属)
// 注意：忽略`responseType`的值为 'stream'，或者是客户端请求
responseEncoding: 'utf8', // 默认值
// `xsrfCookieName`是`xsrf token`的值，被用作`cookie`的名称
xsrfCookieName: 'XSRF-TOKEN', // 默认值
// `xsrfHeaderName`是带有`xsrf token`值的http请求头名称
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值
// `onUploadProgress`允许为上传处理进度事件（浏览器专属）
onUploadProgress: function (progressEvent) {
// 处理原生进度事件
},
// `onDownloadProgress`允许为下载处理进度事件（浏览器专属）
onDownloadProgress: function (progressEvent) {
// 处理原生进度事件
},
// `maxContentLength`定义了node.js中允许的HTTP响应内容的最大字节数
maxContentLength: 2000,
// `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数
maxBodyLength: 2000,
// `validateStatus`定义了对于给定的HTTP状态码是 resolve 还是 reject promise
// 返回`true`(或者设置为`null`或`undefined`)，则promise将会resolved，否则是rejected
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认值
},
// maxRedirects：定义了在node.js中要遵循的最大重定向数，设置为0，则不会进行重定向
maxRedirects: 5, // 默认值
// `socketPath` 定义了在node.js中使用的UNIX套接字
// e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程
// 只能指定 `socketPath` 或 `proxy`
// 若都指定，则使用 `socketPath`
socketPath: null, // default
// `httpAgent`和`httpsAgent`分别定义了在 node.js 中执行 http 和 https 请求时使用的自定义代理
// 这样就可以添加默认情况下未启用的选项，如`keepAlive`
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// `proxy` 定义了代理服务器的主机名，端口和协议
// 可以使用常规的`http_proxy`和`https_proxy` 环境变量
// 使用`false`可以禁用代理功能，同时环境变量也会被忽略
// `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据
// 这将设置一个`Proxy-Authorization`请求头，它会覆盖`headers`中已存在的自定义`Proxy-Authorization`请求头
// 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
proxy: {
protocol: 'https',
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// 详见https://axios-http.com/zh/docs/cancellation
cancelToken: new CancelToken(function (cancel) {
}),
// `decompress`：表示是否要自动解压缩响应正文
// 将其设置为"false"，它不会解压缩响应，并会保留原始的"Content-Encoding"标头
// 如果设置为“true”，将从所有解压缩响应的响应对象中移除"Content-Encoding"标头
// - 仅适用于Node (XHR 无法关闭解压缩功能)
decompress: true // 默认值
}

复制代码

2.11.3 响应结构

一个请求的响应包含以下信息

{
// data：由服务器提供的响应
data: {},
// status：来自服务器响应的 HTTP 状态码
status: 200,
// statusText：来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// headers：服务器响应头
// 所有 header 名称都是小写，且可以使用方括号语法访问
// 例如: `response.headers['content-type']`
headers: {},
// config：是`axios`请求的配置信息
config: {},
// request：是生成此响应的请求
// 在node.js中它是最后一个ClientRequest实例 (in redirects)，
// 在浏览器中则是 XMLHttpRequest 实例
request: {}
}

复制代码

2.11.4 默认配置

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册