前端异步请求封装 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 ? 'http://localhost:8888/api/private/v1' : 
 'http://上线地址:端口/api/private/v1'
})

// 请求拦截器 - 所有的请求开始之前先到此处
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

二、目录index.js

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

// 导出登录API
export const postLoginApi = params => {
 return request.post('/login', params).then( res => res.data)
}
// 商品列表展示接口
export const getGoodsApi = getParamsData => {
    return request.get('goods', {params: getParamsData }).then(res => res.data)
}
// 商品列表删除接口
export const deleteGoodsApi = id => {
    return request.delete(`goods/${id}`).then(res => res.data)
}
// 商品列表添加接口
export const postGoodsApi = params => {
    return request.post('goods', params).then(res => res.data)
}
// 商品列表分类接口
export const getGoodsCateApi = (showLevel = 3) => {
    return request.get('categories', {params: {type: showLevel}}).then(res => res.data)
}
// 商品列表编辑接口
export const putGoodsApi = params => {
    return request.put(`goods/${params.id}`, params)
}