@TOC
一、什么是Axios?
Axios是一个基于Promise的HTTP请求库,可以用于浏览器和Node.js平台。它可以帮助我们发送异步HTTP请求,处理HTTP响应,并支持拦截器、取消请求、自动转换JSON等功能,是一个非常强大和灵活的HTTP请求库。
二、Axios的基本使用方法
安装Axios
在项目中安装Axios:
npm install axios --save
引入Axios
在需要使用Axios的地方引入Axios:
import axios from ‘axios’
发送HTTP请求
通过Axios发送HTTP请求:
axios.get('/api/users')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
Axios提供了多种HTTP请求方法,如get、post、put、delete等,可以根据需要选择合适的方法发送HTTP请求。
配置Axios
Axios可以通过配置来实现自定义的全局配置。
示例代码:
axios.defaults.baseURL = ‘http://api.example.com’
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’
在上面的示例中,通过设置axios的defaults属性来设置全局的配置,比如设置请求的基础URL、设置请求头、设置请求参数编码格式等。
拦截器
Axios提供了拦截器机制,可以在请求或响应被发送或接收之前,对它们进行拦截和处理。
示例代码:
axios.interceptors.request.use(config => {
// 在请求发送之前进行处理
return config
}, error => {
// 处理请求错误
return Promise.reject(error)
})
axios.interceptors.response.use(response => {
// 在响应接收之前进行处理
return response
}, error => {
// 处理响应错误
return Promise.reject(error)
})
在上面的示例中,通过调用axios.interceptors.request.use()和axios.interceptors.response.use()方法来设置请求和响应的拦截器。
取消请求
Axios支持取消请求的功能,可以通过调用请求的cancel方法来取消请求。
示例代码:
const source = axios.CancelToken.source()
axios.get('/api/users', {
cancelToken: source.token
})
.then(response => {
console.log(response.data)
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('请求已取消')
} else {
console.log(error)
}
})
// 取消请求
source.cancel('请求已取消')
在上面的示例中,通过调用axios.CancelToken.source()方法创建一个cancelToken对象,然后将其传递给请求的cancelToken参数,在需要取消请求时,调用cancelToken对象的cancel方法即可。
三、Axios的常见API
Axios的常见API可以分为以下几类:
发送请求
axios(config):发送HTTP请求,参数是一个配置对象,包括请求的URL、请求方式、请求头、请求参数等信息。
-
axios.request(config):发送HTTP请求,与axios(config)方法相同。
-
axios.get(url[, config]):发送HTTP GET请求。
-
axios.post(url[, data[, config]]):发送HTTP POST请求。
-
axios.delete(url[, config]):发送HTTP DELETE请求。
-
axios.head(url[, config]):发送HTTP HEAD请求。
-
axios.options(url[, config]):发送HTTP OPTIONS请求。
-
axios.put(url[, data[, config]]):发送HTTP PUT请求。
-
axios.patch(url[, data[, config]]):发送HTTP PATCH请求。
示例代码:
axios.get('/api/users')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
请求配置
- axios.defaults:设置全局请求配置。
- axios.create([config]):创建一个新的Axios实例,可以用于创建自定义的请求配置。
- axios.all(iterable):发送并发请求,参数是一个可以迭代的对象,比如数组或对象。
- axios.spread(callback):将并发请求的结果解包,参数是一个回调函数,函数的参数是所有请求的结果。
示例代码:
const instance = axios.create({
baseURL: 'http://api.example.com',
timeout: 5000,
headers: {'X-Custom-Header': 'foobar'}
})
axios.all([axios.get('/api/users'), axios.get('/api/posts')])
.then(axios.spread((usersResponse, postsResponse) => {
console.log(usersResponse.data)
console.log(postsResponse.data)
}))
.catch(error => {
console.log(error)
})
响应处理
- axios.interceptors.request.use(onFulfilled[, onRejected]):添加请求拦截器。
- axios.interceptors.response.use(onFulfilled[, onRejected]):添加响应拦截器。
- axios.isCancel(value):判断一个值是否是一个取消请求的对象。
- axios.CancelToken:用于取消请求的对象。
示例代码:
axios.interceptors.request.use(config => {
// 在请求发送之前进行处理
return config
}, error => {
// 处理请求错误
return Promise.reject(error)
})
axios.interceptors.response.use(response => {
// 在响应接收之前进行处理
return response
}, error => {
// 处理响应错误
return Promise.reject(error)
})
错误处理
- axios.isCancel(value):判断一个值是否是一个取消请求的对象。
- axios.Cancel:取消请求的错误类。
- axios.CancelToken:用于取消请求的对象。
- axios.isAxiosError(value):判断一个值是否是Axios请求错误。
示例代码:
axios.get('/api/users')
.then(response => {
console.log(response.data)
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('请求已取消')
} else {
console.log(error)
}
})
Axios的API非常丰富和灵活,可以满足各种HTTP请求的需求,并支持拦截器、取消请求、自动转换JSON等功能,是一个非常强大的HTTP请求库。
四、Axios的封装
在Vue项目中,可以封装Axios来统一处理HTTP请求和响应,并进行全局配置,从而提高代码的可维护性和复用性。
Axios的封装步骤如下:
安装Axios
在项目中安装Axios:
npm install axios --save
创建Axios实例
在需要使用Axios的地方,创建一个Axios实例:
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://api.example.com',
timeout: 5000,
headers: {'X-Custom-Header': 'foobar'}
})
在上面的示例中,通过调用axios.create()方法创建一个新的Axios实例,然后可以通过实例的属性和方法来发送HTTP请求和处理HTTP响应。
添加全局请求拦截器
在Axios实例中添加全局请求拦截器,用于在请求发送之前进行处理:
instance.interceptors.request.use(config => {
// 在请求发送之前进行处理
return config
}, error => {
// 处理请求错误
return Promise.reject(error)
})
在上面的示例中,通过调用instance.interceptors.request.use()方法添加全局请求拦截器,用于在请求发送之前进行处理,比如添加请求头、设置请求参数等。
添加全局响应拦截器
在Axios实例中添加全局响应拦截器,用于在响应接收之前进行处理:
instance.interceptors.response.use(response => {
// 在响应接收之前进行处理
return response
}, error => {
// 处理响应错误
return Promise.reject(error)
})
在上面的示例中,通过调用instance.interceptors.response.use()方法添加全局响应拦截器,用于在响应接收之前进行处理,比如转换响应数据、处理响应错误等。
封装HTTP请求方法
根据实际需求,封装HTTP请求方法,比如GET、POST、PUT等方法。
示例代码:
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://api.example.com',
timeout: 5000,
headers: {'X-Custom-Header': 'foobar'}
})
export const get = (url, params) => {
return instance.get(url, {params})
}
export const post = (url, data) => {
return instance.post(url, data)
}
export const put = (url, data) => {
return instance.put(url, data)
}
export const del = (url) => {
return instance.delete(url)
}
在上面的示例中,通过调用instance.get()、instance.post()、instance.put()和instance.delete()方法封装了HTTP请求方法,并导出给其他模块使用。
Axios的封装可以提高HTTP请求的可维护性和复用性,同时也可以方便地进行全局配置、添加拦截器等,是开发Vue项目不可或缺的一部分。