Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
一、特性
-
在浏览器中是对 XMLHttpRequest 的封装(ajax)
-
支持 Promise 风格(.then() / .catch())
-
拦截请求和响应(节省在发送请求和处理响应时的重复代码书写)
-
能够自动实现请求、响应数据格式的转换
-
能够取消未完成请求
-
保证安全(客户端支持防御 XSRF)
-
......
二、使用
axios
.get('https://jsonplaceholder.typicode.com/todos')
.then(response => {
console.log('成功:', response)
// response 中返回的是经过包装的响应结果
// 后端返回的数据在 response.data 属性中
if (response.status === 200) {
console.log('后端数据:', response.data)
}
})
.catch(err => {
console.error('失败:', err)
})
axios 中提供一系列的请求方法,如:get()、post()、put()、delete() 等,用于发送对应方法的请求。
// 创建 axios 实例
const request = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com', // 基准 URL,即每个 API 接口都有的前缀
timeout: 10000, // 超时时间
})
// 请求拦截器
// request.interceptors.request.use()
// 响应拦截器
request.interceptors.response.use(response => {
if (response.status === 200) {
return response.data
}
})
// 请求接口资源
request.get('/todos').then(data => console.log('todos:', data))
request.get('/posts').then(data => console.log('posts:', data))
三、二次封装
import axios from 'axios'
// 区别开发环境与生产环境下不同的 baseURL
// 在 vite 环境下,利用 import.meta.env 获取环境变量对象,对象中有
// MODE 属性表示环境模式,development-开发模式, production-生产模式
// const baseURL = import.meta.env.MODE === 'development' ? '开发环境下的基准url' : '生产环境下的基准url'
// 也可以根据 import.meta.env.DEV 判断是否为开发模式, import.meta.env.PROD 判断是否为生产模式
// const baseURL = import.meta.env.MODE === 'development' ? 'http://162.14.108.31:5945' : '生产环境下的基准url'
const baseURL = ''
// 另外还有 webpack 环境下,利用 process.env.NODE_ENV 来判断环境模式
// 如果本地开发服务器中有配置反向代理 proxy,则通常 baseURL 中的 协议、域名、端口就可以不用设置
/**
* 创建 axios 实例
*/
const service = axios.create({
baseURL, // 基准 url
timeout: 10000, // 超时时间
})
/**
* 请求拦截
*/
service.interceptors.request.use((config) => {
// 在请求头中添加 token 认证字段的值
// token 的获取还需要在登录成功后获得到真实的 token 数据
// 用户登录成功后是将 token 保存到了 sessionStorage 中,所以在请求
// 发送时先从 sessionStorage 中获取本地保存的 token 数据
const token = sessionStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, (error) => {
// 统一进行错误处理
console.error('请求出现异常:', error)
})
/**
* 响应拦截
*/
service.interceptors.response.use((response) => {
// response.status 中保存的是 HTTP 响应的状态码
if (response.status >= 200 && response.status < 300) {
// 从响应对象中获取后端返回的响应数据
const {code, data, message, ...rest} = response.data
// 如果 code 为 200,则表示正常成功操作
if (code === 200) {
return data || rest
} else {
// TODO: 还有 token 异常的响应处理
return Promise.reject(new Error(message))
}
}
}, (error) => {
// 统一进行错误处理
console.error('请求出现异常:', error)
})
export default service