react封裝基於axios的API請求
阿新 • • 發佈:2019-01-13
一、最近做的一個後臺管理專案,基於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的用法,可以完全按照這樣來寫