axios封装/基础配置

步骤:装包 -> 封装axios实例 ->调用实例发送请求

1. 装包

npm install axios

2. 封装 axios基础配置

javascript 复制代码
// axios实例封装
import axios from 'axios'

// 创建axios实例
const axiosInstance = axios.create({
    baseURL:'http://xxx.net',   //基地址
    timeout:5000  //超时时间
})

// 拦截器(看文档,无需记)

// axios请求拦截器
axiosInstance .interceptors.request.use(config => {
    return config
},e => Promise.reject(e))

// axios响应拦截器
axiosInstance .interceptors.response.use(res => res.data, e => {
    return Promise.reject(e)
})

export default httpInstance

3. 调用实例 发送请求

javascript 复制代码
// 组件中
import request from '@/utils/http

export const getAPI = () => {
    return request({
        url:'接口',
        method:'请求类型'
    })
}

参考:

起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

相关推荐
岁月宁静3 小时前
RAG 文档摄入全链路,从原理到生产落地
vue.js·人工智能·python
#麻辣小龙虾#5 小时前
基于vue3.0开发一款【固废与废气运维管理系统】(支持源码)
前端·vue.js·vue3
一 乐6 小时前
家政服务管理系统|基于springboot + vue家政服务管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·家政服务管理系统
独泪了无痕9 小时前
Vue3中防御XSS攻击的“特效药”-DOMPurify
前端·vue.js·安全
云水一下9 小时前
Vue.js从零到精通系列(五):全局状态管理——Pinia 核心与实践
前端·javascript·vue.js
老马聊技术10 小时前
AI对话功能之SpringBoot整合Vue3
vue.js·人工智能·spring boot·后端
英勇无比的消炎药10 小时前
一站式汇总TinyVue工具案例与真实落地经验
vue.js·前端框架
梵得儿SHI13 小时前
Vue 项目实战与性能优化全攻略:从代码、渲染到首屏,一站式解决卡顿慢加载
前端·vue.js·性能优化·vite·前端面试·前端优化·首屏优化
一 乐15 小时前
幼儿园管理系统|基于springboot + vue幼儿园管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·幼儿园管理系统
云水一下15 小时前
Vue.js从零到精通系列(七):高级特性实战——Teleport、异步组件、自定义指令与TypeScript深度结合
前端·vue.js·typescript