react封装基于axios的API请求
一、最近做的一个后台管理项目,基于antd-pro做的,需要封装基于axios请求,便于开发,直接上代码。
import axios from 'axios'; export const MethodType = {
GET: 'GET',
POST: 'POST',
PUT: 'PUT',
DELETE: 'DELETE',
PATCH:'PATCH'
}; /**
* 模块说明:有api_token的请求
*/
export const request = (api, method = MethodType.GET, params = {}, config = {}) => {
const apiToken = '************';
const data = (method === 'GET') ? 'params' : 'data';
let headers = {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiToken}`,
};
if (config.headers) {
headers = {
...headers,
...config.headers
}
}
return new Promise((resolve, reject) => {
axios({
url: api,
method,
[data]: params,
headers,
}).then(resolve)
.catch(error => {
console.dir(error);
Message.error(typeof error.response.data === 'string' ? error.response.data : JSON.stringify(error.response.data));
reject(error);
});
});
};
二、另外项目统一管理api请求,将api请求都放在了api.js目录下
示例:
import {MethodType} from "./promise"; const promise = require('./promise'); export const _goodsList = async (page,keyword,catId,onSale)=>{
return await promise.request('/api/admin/goods/list', MethodType.GET, {
page,
keyword,
catId,
onSale,
})
};
三、使用api方法
import {
_goodsList,
} from '../utils/api'; @action.bound
async handleSearchData(page,keyword,catId,onSale){
await _goodsList(page,keyword,catId,onSale);
}
总结:上面的就是项目中api的用法,可以完全按照这样来写
react封装基于axios的API请求的更多相关文章
- .NetCore简单封装基于IHttpClientFactory的HttpClient请求
IHttpClientFactory是什么?为什么出现了IHttpClientFactory 一.IHttpClientFactory是什么? IHttpClientFactory是.netcore2 ...
- vue-cli配置axios,并基于axios进行后台请求函数封装
文章https://www.cnblogs.com/XHappyness/p/7677153.html已经对axios配置进行了说明,后台请求时可直接this.$axios直接进行.这里的缺点是后端请 ...
- vue项目实践-添加axios封装api请求
安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安 ...
- axios(封装使用、拦截特定请求、判断所有请求加载完毕)
博客地址:https://ainyi.com/71 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用 vue2.0之后,就不再对 vue-resource 更新 ...
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- 基于 Promise 的 HTTP 请求客户端 axios
基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 ...
- React中利用axios来实现数据请求
axios是基于Promise来封装的,通常我们会用axios在数据请求这块作如下配置: 一.拦截器 有注释,不难理解,通常请求头参数不是写死的,应该是去浏览器中读的,例如,login之后返回toke ...
- laravel5.7 前后端分离开发 实现基于API请求的token认证
最近在学习前后端分离开发,发现 在laravel中实现前后台分离是无法无法使用 CSRF Token 认证的.因为 web 请求的用户认证是通过Session和客户端Cookie的实现的,而前后端分离 ...
- 解决React Native使用Fetch API请求网络报Network request failed
问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...
随机推荐
- python基础:数据类型阶段总结
name =“ alex”1.移除name变量对应的值两边的空格,并输出处理结果 res=name.strip(’ ‘) print(res) 2.判断neme变量对应的值是 ...
- DA_01_linux_物理机局域网工作机制
一:物理机局域网工作机制: 二:域名服务的工作流程: 首先通过域名映射到IP地址,如果没有找到域名,向外部服务器DNS查询,然后通过IP地址访问服务器: 三:Vmware--NAT虚拟网络配置:
- Git修改已经提交的用户名信息
由于工作或者其他原因,有时候我们会修改git的用户名和邮箱账号,没有改过来就提交,就会导致提交人信息不一致的问题.现在记录修正回来的方法 # 第一步,(n)代表提交次数 git rebase -i H ...
- How to export Overload functions from DLL?
Library that exports functions library liba; procedure F(X: Integer); stdcall; overload; begin end; ...
- 如何避免重复安装AppiumSetting、Unlock以及Android ime
老版本Appium(如1.4.16),找到如下路径(根据自己的安装路径找) C:\Program Files (x86)\Appium\node_modules\appium\lib\devices\ ...
- config.json读取和存储
json格式的配置文件的读取和存储 public class ConfigHelper { public static T GetConfig<T>(string path) { if ( ...
- TypeHandler简介及配置(mybatis源码篇)
作者:南柯梦 Mybatis中的TypeHandler是什么? 无论是 MyBatis 在预处理语句(PreparedStatement)中设置一个参数时,还是从结果集中取出一个值时,都会用类型处理器 ...
- Peter Shirley Ray Tracing in One Weekend(上篇)
Peter Shirley-Ray Tracing in One Weekend (2016) 原著:Peter Shirley 本书是Peter Shirley ray tracing系列三部曲的第 ...
- Markdown使用教程(转载收藏)
基础语法 标题 Markdown支持6种级别的标题,对应html标签 h1 ~ h6 # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 以上标记效果如下: h1 ...
- Google Maps API3 之 Hello World
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e ...