react axios封装

axios的简单封装

其实经常在做前后端分离的小伙伴经常遇到前后端交互时，经常会使用axios或者fetch与后端进行交互，常说适合自己的就是最好的，许多人已经有自己常用的一套写法，我现在把我的写法推荐给大家。

import axios from 'axios';
import Qs from 'qs';
import regeneratorRuntime from "regenerator-runtime";
import _ from 'lodash/assignIn';
const baseUrl = process.env.NODE_ENV == 'production' ? 'https:/xxxx' : 'http://xxxxx';const Service = async (context) => {const {url, ...data} = context;const token = window.localStorage.getItem('AUTHORIZATION');const username = window.localStorage.getItem('USERNAME');const instance = axios.create({baseURL: baseUrl,timeout: 100000,credentials: 'include',mode: 'cors',      });const header = data.headers ? data.headers['Content-Type'] : 'application/x-www-form-urlencoded; charset=utf-8';//创建请求拦截器instance.interceptors.request.use(config => {config.params = Qs.stringify(config.params);config.headers = {'Content-Type': header,'Authorization': token,'USERNAME': username};        return config; }, error => {return Promise.reject(error);});//创建响应拦截器instance.interceptors.response.use(response => {  return response;  }, error => {console.log("error:", error);switch (error.response.status) {case 400:return Promise.reject(error.response.data);case 401:window.location.href = '/#/login';return Promise.reject({'errorMessage': '会话已过期，已跳转登录页面'});           case 404:return Promise.reject({'errorMessage': "暂时无法处理该请求，该问题已发送给管理员"});case 500:return Promise.reject({"errorMessage": '服务器请求失败，该问题已发送给管理员'})default:return Promise.reject(error); };      });const response = await new Promise((resolve, reject)=> {instance({url: baseUrl + url,...data}).then((response) => {resolve(response.data);}).catch (error => reject(error));})return response;};
export {Service, baseUrl};

发送端

 let context = {'url': '/setinfo/','method': 'put','data': {last_name:username,sex,canremix:remix},'headers': {'Content-Type': 'application/json; charset=UTF-8'},};Service(context).then((response)=>{if(response.status === 'success'){alert.success("用户信息保存成功");props.onUpdateUserMessage(response.data);props.onUpdateUserCanremix(response.data);};}).catch((error) => {alert.error(error.errorMessage);})

react axios封装相关推荐

axios post body参数_Vue开发中的一些问题（axios封装）
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
axios设置text html,axios封装动态设置Content-Type
问题如下: 有个问题是这样的后台给的API接口请求类型有两种 'Content-Type': 'application/json' 'Content-Type': 'application/x- ...
vue中将axios封装
在平时写项目中,经常会遇到组件调用同一个接口或者不同接口 import axios from "axios"axios({url: "https://autumnfish ...
vue axios封装获取微信公众号用户的openid
目录 axios封装 openid vue vue+ts axios封装一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios, 创建axios实例: axios.crea ...
React 组件封装之 Tree 树形控件
React 组件封装之 Tree 树形控件一.Tree 树形结构二.使用案例三.API 使用指南四.源代码五.总结一.Tree 树形结构组件说明: 实现树形控件,适用于组织架构.文章列表 ...
React 组件封装之 Card 卡片
React 组件封装之 Card 一.Card 卡片二.使用案例三.API 使用指南四.源代码一.Card 卡片组件说明: 使列表成为卡片形式的布局. 效果展示: 二.使用案例 import ...
ajax和axios封装
Ajax 1.ajax理解 ajax是async JavaScript and xml /异步的js和xml 主要用来实现页面的局部刷新在浏览器里内置了ajxa的核心对象的:XMLHttpRequ ...
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封装（通用）
axios封装封装目的: 避免重复设置超时时间,请求头,错误处理:提高代码质量主要文件目录: post/index.js /** @Descripttion: axios 封装* @version ...

react axios封装

axios的简单封装

react axios封装相关推荐

最新文章

热门文章