vue------封装axios为promise的方式，实现链式调用

这里是axios的基础请求头配置，包含基础路径和超时等属性的配置:

 vue------axios在vue中的实例、基本配置和拦截器介绍_绝世唐门三哥的博客-CSDN博客

1. 封装axios为promise的方式(utils/index.js)

// 封装的方法
// 如果是自定义了axios配置，导出对应的文件这里import改为对应的文件路径即可
// import instance from 'api/instance' 

import axios from 'axios'


/**
 * get 方法封装
 * @param url
 * @param params
 * @returns {Promise}
 */
export function getApi(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(`${url}`, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

/**
 * post
 * @param url
 * @param paramsData
 * @returns {Promise}
 */
export function postApi(url, paramsData = {}) {
  return new Promise((resolve, reject) => {
    axios.post(`${url}`, paramsData)

      .then(res  => {
        resolve(res.data)
      }, err => {
        reject(err.data)
      })
  })
}

/**
 * delete 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function deleteApi(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.delete(`${url}`, {

      params: params

    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

/**
 * put 方法封装
 * @param url
 * @param params
 * @returns {Promise}
 */
export function putApi(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.put(`${url}`, params).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

/**
 * patch 方法封装
 * @param url
 * @param params
 * @returns {Promise}
 */
export function patchApi(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(`${url}`, params).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

2. 实际调用使用(utils/api.js)

import * as API form 'utils/index'

/**
 * @function 登陆接口
 * @param {params}  ({账户密码})
 * @return {Promise}
 */
function loginAPI(params) {
  return API.postApi("/passport/login", params);
}

/**
 * @function 日历事件渲染
 * @param params ({起始时间})
 * @returns {Promise}
 */
function calendarAPI(params) {
  return API.getApi('/todo/day', params)
}

export {
  loginAPI,
  calendarAPI
}

 3. vue文件中使用 (home.vue)

import { loginAPI } from "api/apiList"; // 引入封装的接口

export default {
  name: "login",
  data() {
    return {
      msg:''
    };
  },
  mounted: function() {
    this.$nextTick(() => {
      // To disabled submit button at the beginning.
      this.form.validateFields();
    });
  },
  methods: {
    handleSubmit(e) {
    	  // 这里因为已经封装过了，就不用区别请求方式了，直接传参就可，
         想看封装方式，看上面文件index.js即可！
          loginAPI(values).then(res => {
            this.form.loading = false;
            let data = res.data ? res.data : res;
            console.log(res) 
         });
    },
    handleReset() {
      this.form.resetFields();
    }
  }
};

记得开发前提前封装好方便后期维护和添加新的接口调用哦！！！