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 小时前
基于SpringBoot+Vue的前后端分离外卖点单系统设计与实现
vue.js·spring boot·后端·spring·毕业设计·源代码管理
不吃香菜的猪3 小时前
使用@vue-office/pdf时,pdf展示不全
javascript·vue.js·pdf
css趣多多3 小时前
props,data函数,computed执行顺序
前端·javascript·vue.js
一个不称职的程序猿3 小时前
构建优雅的 Vue.js 表情包选择器:一个功能丰富且可定制的 Emoji Picker 组件
前端·javascript·vue.js
Amumu121384 小时前
Vue核心(二)
前端·javascript·vue.js
墨轩尘4 小时前
qiankun的简单使用
前端·vue.js·前端框架
wusp19945 小时前
v-model 和 :value 的深度解析
前端·javascript·vue.js
Code知行合壹6 小时前
Vue项目中SVG图标
前端·vue.js
pas1366 小时前
34-mini-vue 更新element的children-双端对比diff算法
javascript·vue.js·算法
小二·6 小时前
Python Web 开发进阶实战:数字孪生平台 —— 在 Flask + Vue 中构建实时物理世界镜像
前端·vue.js·python