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)

相关推荐
苹果酱0567几秒前
解决linux mysql命令 bash: mysql: command not found 的方法
java·vue.js·spring boot·mysql·课程设计
拉不动的猪3 分钟前
回顾计算属性的缓存与监听的触发返回结果
前端·javascript·vue.js
小七不懂前端38 分钟前
我用 NestJS + Vue3 + Prisma + PostgreSQL 打造了一个企业级 sass 多租户平台
前端·vue.js·后端
进击的野人1 小时前
一个基于 Vue 的 GitHub 用户搜索案例
前端·vue.js·前端框架
+VX:Fegn08952 小时前
计算机毕业设计|基于springboot + vue职位管理推荐系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
前端码农一枚2 小时前
Vue3+TypeScript实现手机扫码功能
vue.js·typescript
钱多多8103 小时前
Vue版本降级操作指南(解决依赖冲突与版本不一致问题)
前端·javascript·vue.js·前端框架
q_19132846953 小时前
基于Springboot+Vue.js的工业人身安全监测系统
vue.js·spring boot·后端·mysql·计算机毕业设计·串口通讯
一念之间lq4 小时前
Elpis 第四阶段· Vue3 完成动态组件建设
前端·vue.js
BD_Marathon4 小时前
Vue3_计算属性
javascript·vue.js·ecmascript