一、Axios封装
在开发过程中,我们常常需要对Axios进行一些自定义的封装,例如添加固定headers、统一处理错误返回等。这样可以使代码更加简洁、易于维护。下面将介绍如何封装Axios。
(1)封装请求配置
我们先来定义一个config.js文件,用于统一管理请求的配置。
import axios from 'axios'
// 创建一个axios的实例
const Axios = axios.create({
baseURL: '',
timeout: 5000,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
// 添加请求拦截
Axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 添加响应拦截器
Axios.interceptors.response.use(
response => {
// 对响应数据做些什么
return response
},
error => {
// 对响应错误做些什么
return Promise.reject(error)
}
)
export default Axios
在这个文件中,我们定义了一个Axios实例,并且添加了请求拦截、响应拦截器。这样在发送请求时,就会先经过请求拦截器进行处理,在响应时也会先经过响应拦截器进行处理。
(2)封装请求方法
在config.js文件中已经定义了Axios实例,我们可以根据需要创建不同的请求方法。例如,我们现在需要定义一个get方法。
import Axios from './config'
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
Axios.get(url, {
params: params
})
.then(response => {
resolve(response.data)
})
.catch(error => {
reject(error)
})
})
}
这里的get方法使用了Axios实例的get方法,并且在请求时传入了url和params,这样就可以发送GET请求。在请求成功时,我们使用Promise将返回的数据resolve出去,在请求失败时,将错误reject出去。
同样的,我们可以根据需要进行不同类型的请求方法的封装。
二、Axios常用方法介绍
在完成了Axios的封装后,下面将介绍Axios常用的一些方法。
(1)GET请求
get(url[, config])
url:请求的url,可以使用相对路径或者绝对路径。
config:请求的配置,包含params、headers等等。
import Axios from './config'
Axios.get('/user?id=1')
.then(response => {})
.catch(error => {})
(2)POST请求
post(url[, data[, config]])
url:请求的url,可以使用相对路径或者绝对路径。
data:请求的数据。
config:请求的配置,包含headers等等。
import Axios from './config'
Axios.post('/user', {
id: 1,
name: 'user'
})
.then(response => {})
.catch(error => {})
(3)PUT请求
put(url[, data[, config]])
url:请求的url,可以使用相对路径或者绝对路径。
data:请求的数据。
config:请求的配置,包含headers等等。
import Axios from './config'
Axios.put('/user', {
id: 1,
name: 'user'
})
.then(response => {})
.catch(error => {})
(4)DELETE请求
delete(url[, config])
url:请求的url,可以使用相对路径或者绝对路径。
config:请求的配置,包含headers等等。
import Axios from './config'
Axios.delete('/user?id=1')
.then(response => {})
.catch(error => {})
(5)请求拦截
在config.js文件中,我们定义了一个请求拦截器。可以使用请求拦截器做一些自定义的数据处理、添加请求头等等。
Axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
config.headers.Authorization = 'token'
return config
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)
(6)响应拦截
在config.js文件中,我们定义了一个响应拦截器。可以使用响应拦截器做一些自定义的错误处理、数据处理等等。
Axios.interceptors.response.use(
response => {
// 对响应数据做些什么
return response
},
error => {
// 对响应错误做些什么
if (error.response) {
// do something
}
return Promise.reject(error)
}
)