目录
使用 XMLHttpRequest 发起 POST 请求,并携带查询参数
使用 XMLHttpRequest 发起 POST 请求,并携带请求体数据
拦截器
拦截器(interceptors)用来全局拦截 axios 的每一次请求与响应。 好处:可以把每个请求中,某些重复性的业务代码封装到拦截器中,提高代码的复用性。
不使用拦截器 - 与使用拦截器
不使用拦截器
// 配置请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3009'
$(function () {
// 点击按钮,发起 GET 请求
$('#btnGET').on('click', function () {
// 展示 loading 效果
$('.loading-box').show()
axios.get('/api/get').then(function (res) {
// 隐藏 loading 效果
$('.loading-box').hide()
console.log(res.data)
})
})
// 点击按钮,发起 POST 请求
$('#btnPOST').on('click', function () {
// 展示 loading 效果
$('.loading-box').show()
axios.post('/api/post', { name: 'zs' }).then(function (res) {
// 隐藏 loading 效果
$('.loading-box').hide()
console.log(res.data)
})
})
$('#btnBooks').on('click', function () {
// 展示 loading 效果
$('.loading-box').show()
axios.get('/api/getbooks').then(function (res) {
// 隐藏 loading 效果
$('.loading-box').hide()
console.log(res.data)
})
})
})
使用拦截器
// 配置请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3009'
// 请求拦截
axios.interceptors.request.use(function (config) {
//请求成功
$('.loading-box').show()
return config
}, function (error) {
//请求失败
return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use(function (response) {
//响应成功
$('.loading-box').hide()
return response // 必须要有return response
}, function (error) {
$('.loading-box').hide()
return Promise.reject(error)
})
$(function () {
// 点击按钮,发起 GET 请求
$('#btnGET').on('click', function () {
// 展示 loading 效果
axios.get('/api/get').then(function (res) {
// 隐藏 loading 效果
console.log(res.data)
})
})
// 点击按钮,发起 POST 请求
$('#btnPOST').on('click', function () {
// 展示 loading 效果
axios.post('/api/post', {
name: 'zs'
}).then(function (res) {
// 隐藏 loading 效果
console.log(res.data)
})
})
$('#btnBooks').on('click', function () {
// 展示 loading 效果
axios.get('/api/getbooks').then(function (res) {
// 隐藏 loading 效果
console.log(res.data)
})
})
})
文件上传
FormData
概念:FormData 是浏览器提供的一个 WebAPI,它以键值对的方式存储数据。
作用:FormData 配合 Ajax 技术,能够向服务器发送 multipart/form-data 格式的请求体数据。
典型应用场景:FormData + Ajax 技术实现文件上传的功能。
注意:Ajax 实现文件上传的时候,请求体的编码格式必须是 multipart/form-data。
FormData + axios 向服务器提交普通的数据(不包含文件上传)
XMLHttpRequest
什么是 XMLHttpRequest
是浏览器内置的一个构造函数
作用:基于 new 出来的 XMLHttpRequest 实例对象,可以发起 Ajax 的请求。
axios 中的 axios.get()、axios.post()、axios() 方法,都是基于 XMLHttpRequest(简称:XHR) 封装出来的!
使用 XMLHttpRequest 发起 GET 请求
主要的 4 个实现步骤:
创建 xhr 对象
调用 xhr.open() 函数
调用 xhr.send() 函数
监听 load 事件
发起 Ajax 请求的核心对象是什么?
XMLHttpRequest
怎样拿到服务器响应回来的数据?
load 事件
xhr.response
发起 GET 请求时携带查询参数
使用 XMLHttpRequest 发起 POST 请求,并携带查询参数
使用 XMLHttpRequest 发起 POST 请求,并携带请求体数据
当需要携带请求体数据时,需要进行额外的两步操作:
在 xhr.open() 之后,调用 xhr.setRequestHeader() 函数,指定请求体的编码格式
在 xhr.send() 中,指定要提交的请求体数据
数据交换格式-JSON转换用法
数据交换格式,就是服务器端与客户端之间数据传输的格式。
两种数据交换格式: XML(很少用) JSON(主流)
JSON(全称:JavaScript Object Notation)是一种数据交换格式,它本质上是用字符串的方式来表示对象或数组类型的数据
用字符串的方式来表示的对象或数组类型的数据,叫做 JSON 数据。
JSON 数据的格式有两种: 对象格式 数组格式
序列化和反序列化
把真实数据转换为字符串的过程,叫做序列化
把字符串转换为真实数据的过程,叫做反序列化
总结
如何使用 axios 提交表单的数据
原则:表单只负责采集数据;axios 负责提交数据
使用 jQuery 的 serialize() 函数,可以快速获取到表单数据
配置请求根路径 axios.defaults.baseURL = ‘根路径’
axios 中拦截器的基本用法
请求拦截器 & 响应拦截器
参考 axios 的官方文档进行使用
掌握 FormData 对象的基本使用
const fd = new FormData()
fd.append(键, 值)
JSON 用法的小结
把 JS 对象转换为 JSON 字符串调用哪个方法?
JSON.stringify()
把 JSON 字符串转换为 JS 对象调用哪个方法?
JSON.parse()
JSON 字符串中,支持的数据类型有哪 6 种?
字符串、数字、布尔值 null、对象、数组
在 JSON 文件中定义 JSON 格式的数据时,要遵守以下的 6 条规则
属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
JSON 中不允许使用单引号表示字符串
JSON 中不能写注释
JSON 的最外层必须是对象或数组格式
不能使用 undefined 或函数作为 JSON 的值