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)

相关推荐
跟着珅聪学java1 小时前
Electron 读取 JSON 配置文件教程
前端·javascript·vue.js
钰衡大师2 小时前
Vue 3 源码学习教程
前端·vue.js·学习
日光倾2 小时前
【Vue.js 入门笔记】闭包和对象引用
前端·vue.js·笔记
EstherNi2 小时前
左右两侧定位的效果,vue3
javascript·vue.js
Rsun045513 小时前
Vue相关面试题
前端·javascript·vue.js
左夕4 小时前
深入理解Vue中的插槽:概念、原理与应用
前端·vue.js
angerdream5 小时前
最新版vue3+TypeScript开发入门到实战教程之学会vue3第一步必是setup语法糖
前端·vue.js
angerdream5 小时前
最新版vue3+TypeScript开发入门到实战教程之学会vue3真正的响应式数据
javascript·vue.js
angerdream5 小时前
最新版vue3+TypeScript开发入门到实战教程之ref与reactive的实战区别用法
前端·vue.js
zhengxianyi5155 小时前
ruo-vue-pro 启用任务调度模块并新增一个job
java·vue.js·spring boot