小知识-实际项目中使用axios对请求api的封装
在实际工作中的项目开发中使用 axios 还是挺多的, 自然就对 axios 进行封装, 而方便项目使用, 接下来学习一些后端请求数据的 api 封装.
Vue use axios 项目 api 封装
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
这里列举一些常用的api 封装: 包括 get请求, post请求, 以及一些功能函数, 方便我们对请求到的数据进行处理.
src\api\home.js
// src\api\home.js import Axios from 'axios'; import qs from 'qs'; import moment from 'moment'; // get export function getContactInfo({ clue_id }) { return Axios({ url: '/api/contact_info/', method: 'get', params: { clue_id, // 同 与 参 }, }); } 复制代码获取用户列表
export function getUsersList({ pageNo, pageCount, searchType, searchValue, sortField, sortOrder, userStatus, status, ... }) { return Axios({ url: '/api/user/search/', method: 'get', params: { page_no: pageNo, // 名同 则只写 pageNo 即可 page_count: pageCount, need_total_count: true, user_status: (Array.isArray(userStatus) && userStatus.join(',')) || userStatus, sort_field: sortField, sort_asc: sortOrder === 'asc' ? true : false, status: (Array.isArray(status) && status.join(',')) || status, }, }); } 复制代码获得用户信息
export function getUserDetailInfoApi({ userId }) { return Axios({ url: '/api/oa/user/detail_info/', method: 'get', params: { user_id: userId, }, }); } 复制代码post请求的书写方式:
export function assignUsersApi({ users, teacher }) { return Axios({ url: '', method: 'post', data: qs.stringify({ clue_id: Array.isArray(users) ? JSON.stringify(users) : users, ct_key: teacher, }), }); } 复制代码另外需要封装一些功能函数, 方便我们处理数据
获取现在时间；
export function getNowTime() { var date = new Date(); var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? '0' + m : m; var d = date.getDate(); d = d < 10 ? '0' + d : d; var h = date.getHours(); h = h < 10 ? '0' + h : h; var minute = date.getMinutes(); minute = minute < 10 ? '0' + minute : minute; var second = date.getSeconds(); second = second < 10 ? '0' + second : second; return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second; } 复制代码获取昨天时间
使用了 插件: moment.js, 当然现在推荐使用更轻便的 day.js
export function getYesterdayTime() { return [ moment() .subtract(1, 'days') .startOf('day') .valueOf(), moment() .subtract(1, 'days') .endOf('day') .valueOf(), ]; } 复制代码获取近30天时间
export function get30DayTime() { return [ moment() .subtract(30, 'day') .valueOf(), moment().valueOf(), ]; } 复制代码获取今天的时间
export function getTodayTime() { return [ moment() .startOf('day') .valueOf(), moment() .endOf('day') .valueOf(), ]; }
作者：阿白756
链接：https://juejin.cn/post/7025235216708927496