码迷,mamicode.com
首页 > 移动开发 > 详细

react封装基于axios的API请求

时间:2019-01-13 14:23:31      阅读:1410      评论:0      收藏:0      [点我收藏+]

标签:eof   get   param   let   search   catch   ror   hda   auth   

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

标签:eof   get   param   let   search   catch   ror   hda   auth   

原文地址:https://www.cnblogs.com/piaobodewu/p/10262397.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!