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)

相关推荐
杨荧1 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
南半球与北海道#3 小时前
前端引入vue-super-flow流程图插件
前端·vue.js·流程图
BillKu4 小时前
vue3+element-plus 输入框el-input设置背景颜色和字体颜色,样式效果等同于不可编辑的效果
前端·javascript·vue.js
每天学习一丢丢4 小时前
Spring Boot + Vue 项目用宝塔面板部署指南
vue.js·spring boot·后端
springfe01014 小时前
vue3组件 - 大文件上传
前端·vue.js
好好好明天会更好4 小时前
uniapp项目中小程序的生命周期
前端·vue.js
萌萌哒草头将军5 小时前
有了它 ,我彻底告别了 try-finally 🔥🔥🔥
前端·javascript·vue.js
anyup5 小时前
🔥🔥 10 天 Star 破百!uView Pro 文档也开源啦:完全免费、无广告、高效上手
前端·vue.js·uni-app
南半球与北海道#6 小时前
el-table合并单元格
javascript·vue.js·elementui·表格合并
啷咯哩咯啷7 小时前
element-plus el-tree-v2大数据量勾选节点卡顿问题
前端·javascript·vue.js