react封装基于axios的API请求

发布时间：2020-12-15 20:36:03 所属栏目：百科来源：网络整理

导读：一、最近做的一个后台管理项目，基于antd-pro做的，需要封装基于axios请求，便于开发，直接上代码。 import axios from ‘axios‘;export const MethodType = { GET: ‘GET‘,POST: ‘POST‘,PUT: ‘PUT‘,DELETE: ‘DELETE‘,PATCH:‘PATCH‘};/** * 模块说

一、最近做的一个后台管理项目，基于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,onSale,})
};

三、使用api方法

import {
  _goodsList,} from ‘../utils/api‘;


  @action.bound
  async handleSearchData(page,onSale){
    await _goodsList(page,onSale);
  }

总结：上面的就是项目中api的用法，可以完全按照这样来写

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!