Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

In the actual work of the project development is quite a lot of use of AXIOS, it is natural to encapsulate AXIOS, and convenient for the project to use, next to learn some backend request data API encapsulation.

Vue Use AXIos project API encapsulation

Axios is a Promise-based HTTP library that can be used in browsers and Node.js.

Here are some common API wrappers: get requests, POST requests, and functions that allow us to process the requested data.

  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, / / with the cords}}); }Copy the code
  1. Get user list
export function getUsersList({ pageNo, pageCount, searchType, searchValue, sortField, sortOrder, userStatus, status, . }) {return Axios({url: '/ API /user/search/', method: 'get', params: {page_no: pageNo, params: {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, }, }); }Copy the code
  1. Get user information
export function getUserDetailInfoApi({ userId }) {
  return Axios({
    url: '/api/oa/user/detail_info/'.method: 'get'.params: {
      user_id: userId,
    },
  });
}
Copy the code
  1. Post requests are written as follows:
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,
    }),
  });
}
Copy the code

In addition, we need to encapsulate some functions to facilitate our data processing

  1. Get the present time;
export function getNowTime() {
  var date = new Date(a);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 + The '-' + m + The '-' + d + ' ' + h + ':' + minute + ':' + second;
}
Copy the code
  1. Get yesterday’s time

The plugin: moment.js was used, although the lighter day.js is now recommended

export function getYesterdayTime() {
  return [
    moment()
      .subtract(1.'days')
      .startOf('day')
      .valueOf(),
    moment()
      .subtract(1.'days')
      .endOf('day')
      .valueOf(),
  ];
}
Copy the code
  1. Get nearly 30 days
export function get30DayTime() {
  return [
    moment()
      .subtract(30.'day')
      .valueOf(),
    moment().valueOf(),
  ];
}
Copy the code
  1. Get today’s time
export function getTodayTime() {
  return [
    moment()
      .startOf('day')
      .valueOf(),
    moment()
      .endOf('day')
      .valueOf(),
  ];
}
Copy the code