一、最近做的一个后台管理项目,基于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请求的更多相关文章

  1. .NetCore简单封装基于IHttpClientFactory的HttpClient请求

    IHttpClientFactory是什么?为什么出现了IHttpClientFactory 一.IHttpClientFactory是什么? IHttpClientFactory是.netcore2 ...

  2. vue-cli配置axios,并基于axios进行后台请求函数封装

    文章https://www.cnblogs.com/XHappyness/p/7677153.html已经对axios配置进行了说明,后台请求时可直接this.$axios直接进行.这里的缺点是后端请 ...

  3. vue项目实践-添加axios封装api请求

    安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安 ...

  4. axios(封装使用、拦截特定请求、判断所有请求加载完毕)

    博客地址:https://ainyi.com/71 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用 vue2.0之后,就不再对 vue-resource 更新 ...

  5. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  6. 基于 Promise 的 HTTP 请求客户端 axios

    基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 ...

  7. React中利用axios来实现数据请求

    axios是基于Promise来封装的,通常我们会用axios在数据请求这块作如下配置: 一.拦截器 有注释,不难理解,通常请求头参数不是写死的,应该是去浏览器中读的,例如,login之后返回toke ...

  8. laravel5.7 前后端分离开发 实现基于API请求的token认证

    最近在学习前后端分离开发,发现 在laravel中实现前后台分离是无法无法使用 CSRF Token 认证的.因为 web 请求的用户认证是通过Session和客户端Cookie的实现的,而前后端分离 ...

  9. 解决React Native使用Fetch API请求网络报Network request failed

    问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...

随机推荐

  1. python基础:数据类型阶段总结

    name =“   alex”1.移除name变量对应的值两边的空格,并输出处理结果      res=name.strip(’  ‘)      print(res) 2.判断neme变量对应的值是 ...

  2. DA_01_linux_物理机局域网工作机制

    一:物理机局域网工作机制: 二:域名服务的工作流程: 首先通过域名映射到IP地址,如果没有找到域名,向外部服务器DNS查询,然后通过IP地址访问服务器: 三:Vmware--NAT虚拟网络配置:

  3. Git修改已经提交的用户名信息

    由于工作或者其他原因,有时候我们会修改git的用户名和邮箱账号,没有改过来就提交,就会导致提交人信息不一致的问题.现在记录修正回来的方法 # 第一步,(n)代表提交次数 git rebase -i H ...

  4. How to export Overload functions from DLL?

    Library that exports functions library liba; procedure F(X: Integer); stdcall; overload; begin end; ...

  5. 如何避免重复安装AppiumSetting、Unlock以及Android ime

    老版本Appium(如1.4.16),找到如下路径(根据自己的安装路径找) C:\Program Files (x86)\Appium\node_modules\appium\lib\devices\ ...

  6. config.json读取和存储

    json格式的配置文件的读取和存储 public class ConfigHelper { public static T GetConfig<T>(string path) { if ( ...

  7. TypeHandler简介及配置(mybatis源码篇)

    作者:南柯梦 Mybatis中的TypeHandler是什么? 无论是 MyBatis 在预处理语句(PreparedStatement)中设置一个参数时,还是从结果集中取出一个值时,都会用类型处理器 ...

  8. Peter Shirley Ray Tracing in One Weekend(上篇)

    Peter Shirley-Ray Tracing in One Weekend (2016) 原著:Peter Shirley 本书是Peter Shirley ray tracing系列三部曲的第 ...

  9. Markdown使用教程(转载收藏)

    基础语法 标题 Markdown支持6种级别的标题,对应html标签 h1 ~ h6 # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 以上标记效果如下: h1 ...

  10. Google Maps API3 之 Hello World

    <html xmlns="http://www.w3.org/1999/xhtml">     <head>         <meta http-e ...