React模拟后台项目（五）接口文件配置（ajax）

一、请求封装 src/api/request.js

import axios from 'axios'

// 判断当前的运行环境
// isDev 为真 开发环境 --- npm run serve
// isDev 为假 非开发环境（测试环境，生产环境）- npm run build
const isDev = process.env.NODE_ENV === 'development'

const request = axios.create({
// 根据环境 设置不同的baseURL
// baseURL: 'http://localhost:3000/api'
	baseURL: isDev ? '本地地址' : '线上地址'
})

// 请求拦截器 - 所有的请求开始之前先到此处
request.interceptors.request.use((config) => {
	// 1.动画、请求token等
	console.log('正在加载....')
	var token = localStorage.getItem('token') || ''
	//2.判断
	if (token) {
		//设置请求头（后期请求接口 http请求头携带Authorization参数）
		config.headers['Authorization'] = token
	}
	return config
}, (error) => {
	return Promise.reject(error)
})

// 响应拦截器 --- 所有请求的相应先到此处
request.interceptors.response.use((response) => {
	// 动画隐藏、错误统一处理等
	console.log('加载完毕')
	return response
}, (error) => {
	return Promise.reject(error)
})

export default request

二、get、post、put、delete请求方式 src/api/index.js

// 导入组件
import request from './request'

// 导出登录API
export const postLoginApi = params => {
 return request.post('/login', params).then( res => res.data)
}

// 用户接口
// 展示
export const getUsersApi = getParamsUser => {
    return request.get('/users', {params: getParamsUser}).then( res => res.data)
}
// 删除
export const deleteUsersApi = id => {
    return request.delete(`/users/${id}`).then( res => res.data)
}
// 添加
export const postUsersApi = params => {
    return request.post('/users', params ).then( res => res.data )
}
// 编辑
export const putUsersApi = (id, params) => {
    return request.put(`/users/${id}`, params).then( res => res.data )
}

// 商品接口
// 展示
export const getGoodsApi = getParamsGoods => {
    return request.get('/goods', {params: getParamsGoods}).then( res => res.data)
}
// 删除
export const deleteGoodsApi = id => {
    return request.delete(`/goods/${id}`).then( res => res.data)
}

// 订单接口
// 展示
export const getOrdersApi = params => {
    return request.get('/orders', { params }).then( res => res.data)
}

// echarts
// 柱状图
export const getEchartsApi = () => {
    return request.get('reports/:type', '' ).then( res => res.data)
}