🟡Axios学习

本文最后更新于:2022年5月2日 晚上

安装依赖

1
pnpm i axios

使用时引入axios

1
import axios from 'axios'

axios( ) API配置

🍆axios配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
axios({
url: '/user', // 请求地址(必选项)
baseURL: 'https://www.bar.com/foo', // 自动配置前缀
params: { // url参数
id: 1234
},
method: 'post', // 请求方式(默认GET)
data: { // 请求体
name: 'foo',
id: 1231,
}
})
.then( (res) => {
// 成功执行
})
.catch((error) => {
// 失败执行
})
.then(() => {
// 始终执行
})

🍆axios请求别名

使用别名后无需指定method,data等属性

1
2
3
4
5
6
7
8
9
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]])
axios.patch(url, [data, [config]])

🍆自定义请求

请求结果

1
2
3
4
5
6
7
8
{
data: {}, // 服务器返回内容
status: 200, // http状态码
statusText: 'OK', // http状态信息
headers: {}, // 服务器响应头
config: {}, // axios配置信息
request: {} // q
}

拦截器

🌿请求拦截器

1
2
3
4
5
6
7
8
9
10
axios.interceptors.request.use(
function (config) {
// 请求前处理
return config
},
function (error) {
// 请求错误处理
return error
}
)

🌿响应拦截器

对返回的响应做预处理

1
2
3
4
5
6
7
8
9
10
axios.interceptors.response.use(
function (response) {
// 状态码2xx时处理
return response
},
function (error) {
// 状态码超出2xx时处理
return error
}
)

🌿拦截器移除

1
2
3
const interceptor = axios.interceptors.response.use(...)

axios.interceptors.request.eject(interceptor)

🟡Axios学习
https://qingshaner.com/Axios学习/
作者
清山
发布于
2022年1月25日
许可协议