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)

相关推荐
孜孜不倦不忘初心10 分钟前
Ant Design Vue 表格组件空数据统一处理 踩坑
前端·vue.js·ant design
csdn_aspnet23 分钟前
查看 vite 与 vue 版本
javascript·vue.js
于先生吖1 小时前
SpringBoot+Vue 前后端分离短剧漫剧系统开发实战
vue.js·spring boot·后端
毕设源码-赖学姐1 小时前
【开题答辩全过程】以 基于VUE的环保网站设计为例,包含答辩的问题和答案
前端·javascript·vue.js
紫_龙3 小时前
最新版vue3+TypeScript开发入门到实战教程之DOM操作
javascript·vue.js·typescript
SuperEugene3 小时前
JS/TS 编码规范实战:Vue 场景变量 / 函数 / 类型标注避坑|编码语法规范篇
开发语言·javascript·vue.js
FlyWIHTSKY3 小时前
vue3中const的使用和定义
前端·javascript·vue.js
gongzemin4 小时前
怎么在VS Code 调试vue3 源码
前端·vue.js
xuankuxiaoyao6 小时前
VUE.JS 实践 第二章
前端·javascript·vue.js
毕设源码-赖学姐6 小时前
【开题答辩全过程】以 基于Vue的电商管理平台为例,包含答辩的问题和答案
前端·javascript·vue.js