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)

相关推荐
介si啥呀~1 分钟前
vue2 el-element中el-select选中值,数据已经改变但选择框中不显示值,需要其他输入框输入值才显示这个选择框才会显示刚才选中的值
javascript·vue.js·elementui
嘴巴嘟嘟2 分钟前
Vue 大文件分片上传组件实现解析
前端·javascript·vue.js
程序猿chen10 分钟前
Vue.js组件安全开发实战:从架构设计到攻防对抗
前端·vue.js·安全·面试·前端框架·跳槽·安全架构
拖孩1 小时前
【Nova UI】六、SASS 赋能组件库:通用方法与混入的变革力量
前端·javascript·vue.js
武昌库里写JAVA1 小时前
大模型评估论文粗读“AGIEval: A Human-Centric Benchmark for Evaluating Foundation Models“
vue.js·spring boot·毕业设计·layui·课程设计
William Dawson10 小时前
【Vue 3 + Element Plus 实现产品标签的动态添加、删除与回显】
前端·javascript·vue.js
蕉君桑11 小时前
vue2使用vue-echarts
前端·vue.js·echarts
小王码农记13 小时前
vue中动态绑定ref后,获取某个具体组件实例
前端·javascript·vue.js
悲且狂13 小时前
vue辅助工具(vue系列二)
前端·javascript·vue.js
DCTANT14 小时前
【原创】vue-element-admin-plus完成确认密码功能,并实时获取Form中表单字段中的值
前端·javascript·vue.js·elementui·typescript