axios封装(痛定思痛下的总结)

封装

import axios from 'axios'
import { Message } from 'element-ui'
import { getToken, removeToken } from './token'
import router from '../router/index'// 创建实例时设置配置的默认值
var instance = axios.create({baseURL: process.env.VUE_APP_URL,withCredentials: true
})// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么if (getToken()) {config.headers.token = getToken()}return config
}, function (error) {// 对请求错误做些什么return Promise.reject(error)
})// 添加响应拦截器
// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么// return responseif (response.data.code === 200) {return response.data} else if (response.data.code === 206) {Message.error(response.data.message)router.push('/')removeToken()return response.data} else {Message.error(response.data.message)// return Promise.reject('error')return response.data}
}, function (error) {// 对响应错误做点什么return Promise.reject(error)
})export default instance

使用

import instance from '@/utils/request.js'
// 注册验证码
function getPhoneCode (data) {return instance({url: '/sendsms',method: 'post',data: data})
}
// 注册功能
function register (data) {return instance({url: '/register',method: 'post',data: data})
}// export default getPhoneCode
export { getPhoneCode, register }

引用修改：axios文档

axios封装(痛定思痛下的总结)相关推荐

axios post body参数_Vue开发中的一些问题（axios封装）
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
前端学习笔记（16）-Axios封装
1.Axios介绍 1.1 概述 Vue前端开发少不了向服务器请求数据,我们选择axios插件,他是一款功能强大,且易用的网络请求工具. 1.2 全称 ajax i/o system 1.3 功能介绍 ...
axios封装—vue3项目
目录前言正文安装axios 封装请求api 1. 在src目录下新建个api目录,里面放请求相关的文件,新建`request.js`文件,首先引入`axios` 2. 创建一个`axios`实例 ...
axios封装，api接口封装统一管理
axios封装,api接口封装统一管理一. axios说明 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios的封装和api接口的统一管理, ...
axios post object object_一套全面又有实际意义的axios封装+api管理方案
[toc] 前言功能点此文主要是基于vuecli3项目中axios封装及api管理的实践记录及过程中的踩坑收获,功能基本都是根据工作中需求实现.需求背景是,在同一套请求配置下,实现以下主要功能: ...
vite + vue3 + 封装axios + 封装loading + 封装返回顶部
前言前期回顾 vite + vue3 + ts配置<企业级项目>二次封装el-table.分页_0.活在风浪里的博客-CSDN博客封装的功能有哪些?分页.表格排序.文字居中. ...
vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目
h5移动端项目模板基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装,构建手机端模板脚手架启动项目 git clone ht ...
axios设置text html,axios封装动态设置Content-Type
问题如下: 有个问题是这样的后台给的API接口请求类型有两种 'Content-Type': 'application/json' 'Content-Type': 'application/x- ...
C# 视频监控系列（7）：服务器端——封装API(下)(1)
前言写系列文章的时候[前言]部分变得无言了,可能来得顺利了点吧: ) 本章中提供的封装均是我用笨办法从<<Hikvision 板卡网络开发包编程手册V4.7>>和<&l ...

axios封装(痛定思痛下的总结)

封装

使用

axios封装(痛定思痛下的总结)相关推荐

最新文章

热门文章