vue3中使用axios
vue3中使用axios
Axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js。它可以在浏览器中发送异步请求,也可以在Node.js中发送HTTP请求。Axios可以处理HTTP请求和响应,支持拦截器、取消请求、自动转换JSON数据等功能。在Vue3中,Axios是一个常用的HTTP请求库。
npm install axios
基本结构
import axios from 'axios';
// 发送GET请求
axios.get('/api/user')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 发送POST请求
axios.post('/api/user', {
firstName: 'John',
lastName: 'Doe'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
GET
import axios from 'axios';
axios.get('/api/user')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
POST
import axios from 'axios';
axios.post('/api/user', {
firstName: 'John',
lastName: 'Doe'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
拦截器
import axios from 'axios';
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
axios.get('/api/user')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
封装示例
// import axios from 'axios'
import qs from 'qs'
import { message } from 'ant-design-vue'
import router from '@/router/index'
import { loadingVisible } from '@/utils/common/visible-data'
import { storage } from '../../utils/storage/storage'
import { removePending, addPending } from './pending'
import { removeUserStorage } from '@/utils/user/user-info'
import { AxiosRequestConfig, AxiosResponse } from 'axios'
// 全局配置
const apiUrl = import.meta.env.VITE_API_DOMAIN
axios.defaults.withCredentials = false
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
// 允许跨域
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'
function myAxios(axiosConfig: AxiosRequestConfig, customOptions: any, loadings: any): Promise<AxiosResponse<any>> {
const { timeout = 8000 } = customOptions
const service = axios.create({
baseURL: apiUrl, // 设置统一的请求前缀
timeout // 设置统一的超时时长
})
// 是否开启/取消重复请求
const cancel = {
cancel_request: false,
...customOptions
}
// 是否开启loading, 默认为 false
const loading = {
loading: loadings.loading
}
// 请求拦截器
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
const { method, data, headers } = config
removePending(config)
cancel.cancel_request && addPending(config)
if (['post', 'put', 'delete'].includes(method as string)) {
config.data = qs.parse(data) //序列化
}
// 若是有做鉴权token , 就给头部带上token
if (storage.get('token')) {
if (headers) {
headers.Authorization = storage.get('token') as string
}
}
// 请求之前发送loading
if (loading.loading) {
loadingVisible.value = true
}
return config
},
error => {
message.error(error.data.error.message)
return Promise.reject(error.data.error.message)
}
)
// 响应拦截器
service.interceptors.response.use(
(res: AxiosResponse<any>) => {
// 在请求结束后,移除本次请求
removePending(res)
// 请求之后关闭loading
if (loading.loading) {
setTimeout(function () {
loadingVisible.value = false
}, 500)
}
// 对响应数据进行处理,例如检查统一的字段(如 statusCode)
if (res.status === 200 || res.data.statusCode === 200) {
return Promise.resolve(res)
}
return Promise.reject(res)
},
error => {
loadingVisible.value = false
const statusTextMap: Record<number, string> = {
400: '发出的请求有错误,服务器没有进行新建或修改数据的操作',
401: '登录失效,请重新登录',
403: '用户得到授权,但是访问是被禁止的',
404: '网络请求不存在',
406: '请求的格式不可得',
410: '请求的资源被永久删除,且不会再得到的',
422: '当创建一个对象时,发生一个验证错误',
500: '服务器发生错误,请检查服务器',
502: '网关错误',
503: '服务不可用,服务器暂时过载或维护',
504: '网关超时'
}
if (error.response && error.response.status) {
const statusText = statusTextMap[error.response.status] ?? '其他错误'
message.error(`${statusText}(${error.response.status})`)
if (error.response.status === 401) {
removeUserStorage()
router.replace({
path: '/Login'
})
}
return Promise.reject(error)
}
return Promise.reject(new Error('网络请求失败,请稍后重试'))
}
)
return service(axiosConfig)
}
export default myAxios
main.ts
全局使用
import axios from './utils/http/axios'
// 全局ctx(this) 上挂载 $axios
app.config.globalProperties.$api = axios
调用
import request from '@/utils/http/axios'
import { IntArticle } from "@/api/data/interData";
export class article {
static async GetCountAsync() {
return await request({
url: "/api/SnArticle/GetCountAsync",
method: 'get',
})
}
static async AddAsync(resultData: IntArticle) {
return await
request({
url: "/api/SnArticle/AddAsync",
method: "post",
data: resultData,
})
}
static async UpdateAsync(resultData: IntArticle) {
return await
request({
url: "/api/SnArticle/UpdateAsync",
method: "put",
data: resultData,
})
}
static async DeleteAsync(id: number) {
return await
request({
url: "/api/SnArticle/DeleteAsync?id=" + id,
method: "delete",
})
}
}
并发请求
处理并发请求的助手函数
axios.all(iterable)
axios.spread(callback)
import { article } from '@/api/index';
import { blogsList } from "./components/data";
import axios from '@/utils/http/axios'
class methods {
static async GetFySortTitle() {
await article.GetFySortTitleAsync(blogsList.page, blogsList.pagesize, true).then((res: any) => {
blogsList.dataResult = res.data;
});
}
static async ConutSort() {
await article.ConutSort(7).then((result: any) => {
blogsList.count = result.data;
});
}
}
async function QueryAll() {
// axios.all([await methods.ConutSort(), await methods.GetFySortTitle()]).then(axios.spread((Fy, co: any) => {
// blogsList.count = co.data;
// blogsList.dataResult = Fy.data;
// }))
axios.all([await methods.ConutSort(), await methods.GetFySortTitle()])
}
export {
methods,
QueryAll
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~