axios(儿个煞斯)是什么？
- 前端最流行的ajax请求库
- react/vue 官方都推荐使用axios发ajax请求
- 文档：http://www.axios-js.com/zh-cn/docs/
axios特点
- 基本promise的异步ajax请求库
- 浏览器端/node端都可以使用
- 支持请求/响应拦截器
- 支持请求取消
- 请求/响应数据转换
- 批量发送多个请求
axios常用语法
| axios(config) | 通用/最本质的发任意类型请求的方式 |
| axios(url[,config]) | 可以只指定url发送get请求 |
| axios.request(config) | 等同于axios(config) |
| axios.get(url[,config]) | 发get请求 |
| axios.delete(url[.config]) | 发delete请求 |
| axios.post(url[,data,config]) | 发post请求 |
| axios.put(url[,data,config]) | 发put请求 |
| axios.defaults.xxx | 请求的默认全局配置 |
| axios.interceptors.request.use() | 添加请求拦截器 |
| axios.interceptors.response.use() | 添加响应拦截器 |
| axios.create([config]) | 创建一个新的axios（它没有下面的功能） |
| axios.Cancel() | 用于创建取消请求的错误对象 |
| axios.CancelToken() | 用于创建取消请求的token对象 |
| axios.isCancel() | 是否是一个取消请求的错误 |
| axios.all(promises) | 用于批量执行多个异步请求 |
| axios.spread() | 用来指定接收所有成功数据的回调函数方法 |
难点语法的理解和使用
axios.create(config)
- 根据指定配置创建一个新的axios, 也就就每个新axios 都有自己的配置
- 新axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
- 为什么要设计这个语法?
(1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一
样, 如何处理
(2) 解决: 创建2 个新axios, 每个都有自己特有的配置, 分别应用到不同要
求的接口请求中
拦截器函数/ajax请求/请求的回调函数的调用顺序
- 说明: 调用axios()并不是立即发送ajax 请求, 而是需要经历一个较长的流程
- 流程: 请求拦截器2 => 请求拦截器1 => 发ajax 请求=> 响应拦截器1 => 响
应拦截器2 => 请求的回调 - 注意: 此流程是通过promise 串连起来的, 请求拦截器传递的是config, 响应
拦截器传递的是response
取消请求
- 基本流程
配置cancelToken 对象
缓存用于取消请求的cancel 函数
在后面特定时机调用cancel 函数取消请求
在错误回调中判断如果error 是cancel, 做相应处理 - 实现功能
点击按钮, 取消某个正在请求中的请求
在请求一个接口前, 取消前面一个未完成的请求
axios的使用
发送axios请求
<body>
<div>
<button onclick="testGet()">GET请求</button>
<button onclick="testPost()">POST请求</button>
<button onclick="testPut()">PUT请求</button>
<button onclick="testDelete()">DELETE请求</button>
</div>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<script>
// 指定默认配置
axios.defaults.baseURL = ‘http://localhost:3000‘
/* 1. GET请求: 从服务器端获取数据*/
function testGet() {
// axios.get(‘/posts?id=1‘)
axios({
url: ‘/posts‘,
params: {
id: 1
}
})
.then(response => {
console.log(‘/posts get‘, response.data)
})
}
/* 2. POST请求: 向服务器端添加新数据*/
function testPost() {
// axios.post(‘/posts‘, {"title": "json-server3", "author": "typicode3"})
axios({
url: ‘/posts‘,
method: ‘post‘,
data: {"title": "json-server4", "author": "typicode4"}
})
.then(response => {
console.log(‘/posts post‘, response.data)
})
}
/* 3. PUT请求: 更新服务器端已经数据 */
function testPut() {
// axios.put(‘http://localhost:3000/posts/4‘, {"title": "json-server...", "author": "typicode..."})
axios({
url: ‘/posts/4‘,
method: ‘put‘,
data: {"title": "json-server5", "author": "typicode5"}
})
.then(response => {
console.log(‘/posts put‘, response.data)
})
}
/* 4. DELETE请求: 删除服务器端数据 */
function testDelete() {
// axios.delete(‘http://localhost:3000/posts/4‘)
axios({
url: ‘/posts/5‘,
method: ‘delete‘
})
.then(response => {
console.log(‘/posts delete‘, response.data)
})
}
</script>
</body>
create方法
需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中
<body>
<!--
1). axios.create(config)
a. 根据指定配置创建一个新的axios, 也就就每个新axios都有自己的配置
b. 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
c. 为什么要设计这个语法?
需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中
-->
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<script>
axios.defaults.baseURL = ‘http://localhost:3000‘
// 使用axios发请求
axios({
url: ‘/posts‘ // 请求3000
})
// axios({
// url: ‘/xxx‘ // 请求4000
// })
const instance = axios.create({
baseURL: ‘http://localhost:4000‘
})
// 使用instance发请求
// instance({
// url: ‘/xxx‘ // 请求4000
// })
instance.get(‘/xxx‘)
</script>
</body>
axios的处理链流程
// 添加请求拦截器(回调函数)
axios.interceptors.request.use(
config => {
console.log(‘request interceptor1 onResolved()‘)
return config
},
error => {
console.log(‘request interceptor1 onRejected()‘)
return Promise.reject(error);
}
)
axios.interceptors.request.use(
config => {
console.log(‘request interceptor2 onResolved()‘)
return config
},
error => {
console.log(‘request interceptor2 onRejected()‘)
return Promise.reject(error);
}
)
// 添加响应拦截器
axios.interceptors.response.use(
response => {
console.log(‘response interceptor1 onResolved()‘)
return response
},
function (error) {
console.log(‘response interceptor1 onRejected()‘)
return Promise.reject(error);
}
)
axios.interceptors.response.use(
response => {
console.log(‘response interceptor2 onResolved()‘)
return response
},
function (error) {
console.log(‘response interceptor2 onRejected()‘)
return Promise.reject(error);
}
)
axios.get(‘http://localhost:3000/posts‘)
.then(response => {
console.log(‘data‘, response.data)
})
.catch(error => {
console.log(‘error‘, error.message)
})
取消请求
<body>
<button onclick="getProducts1()">获取商品列表1</button><br>
<button onclick="getProducts2()">获取商品列表2</button><br>
<button onclick="cancelReq()">取消请求</button><br>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<script>
let cancel // 用于保存取消请求的函数
function getProducts1() {
axios({
url: ‘http://localhost:4000/products1‘,
cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
// 保存取消函数, 用于之后可能需要取消当前请求
cancel = c
})
}).then(
response => {
cancel = null
console.log(‘请求1成功了‘, response.data)
},
error => {
cancel = null
console.log(‘请求1失败了‘, error.message, error)
}
)
}
function getProducts2() {
axios({
url: ‘http://localhost:4000/products2‘
}).then(
response => {
console.log(‘请求2成功了‘, response.data)
},
error => {
cancel = null
console.log(‘请求2失败了‘, error.message)
}
)
}
function cancelReq() {
// alert(‘取消请求‘)
// 执行取消请求的函数
if (typeof cancel === ‘function‘) {
cancel(‘强制取消请求‘)
} else {
console.log(‘没有可取消的请求‘)
}
}
</script>
</body>