🟡Axios使用与封装

本文最后更新于:2024年4月25日 上午

安装依赖

1
pnpm i axios

使用时引入axios

1
import axios from 'axios'

基础使用

使用API别名

  • 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
9
10
11
12
13
14
15
16
import Axios from 'axios'

// Axios.get(url[, config])
const res = await Axios.get('http://api.test.com', {
params: {
id: 1
},
timeout: 5000
})

// Axios.post(url[, data[, config]])
const res = await Axios.post('http://api.test.com', {
id: 0
},{
timeout: 10000
})

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)

封装

src/utils/request.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Axios from 'axios'

const axios = Axios.create({
baseURL: 'https://api.test.com/',
timeout: 5000,
})

axios.interceptors.request.use((config) => {

}, (error) => {

})



export function ApiGet(url, params = {}, config = {}) {
return axios.get(url, {
params,
...config
})
}



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