小知识-实际项目中使用axios对请求api的封装

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

在实际工作中的项目开发中使用 axios 还是挺多的, 自然就对 axios 进行封装, 而方便项目使用, 接下来学习一些后端请求数据的 api 封装.

Vue use axios 项目 api 封装

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

这里列举一些常用的api 封装: 包括 get请求, post请求, 以及一些功能函数, 方便我们对请求到的数据进行处理.

1. 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, // 同 与 参
    },
  });
}

1. 获取用户列表

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,
    },
  });
}

2. 获得用户信息

export function getUserDetailInfoApi({ userId }) {
  return Axios({
    url: '/api/oa/user/detail_info/',
    method: 'get',
    params: {
      user_id: userId,
    },
  });
}

3. 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,
    }),
  });
}

另外需要封装一些功能函数, 方便我们处理数据

1. 获取现在时间；

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;
}

2. 获取昨天时间 使用了 插件: moment.js, 当然现在推荐使用更轻便的 day.js

export function getYesterdayTime() {
  return [
    moment()
      .subtract(1, 'days')
      .startOf('day')
      .valueOf(),
    moment()
      .subtract(1, 'days')
      .endOf('day')
      .valueOf(),
  ];
}

3. 获取近30天时间

export function get30DayTime() {
  return [
    moment()
      .subtract(30, 'day')
      .valueOf(),
    moment().valueOf(),
  ];
}

4. 获取今天的时间

export function getTodayTime() {
  return [
    moment()
      .startOf('day')
      .valueOf(),
    moment()
      .endOf('day')
      .valueOf(),
  ];
}