vue------axios在vue中採用promise封裝常用方法的代碼（2020年6月9日）

config
node_modules
src
- -api
- - -apiList.js > 調用封裝index.js的封裝接口，後期某個頁面用就引入該文件對應的接口函數就可（代碼如下）
- - -index.js > 通過promise封裝的axios的各種方法集合
- -common
- -components
- - -food
- - - - index.vue 調用apiList.js的vue文件
static
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
index.html
package-lock.json
package.json
README.md

封裝axios的根文件： api/index.js

這裏是封裝axios的根文件

import axios from 'axios';
import router from '@/router'
import store from '@/store'

import {message, Modal} from 'ant-design-vue'
import 'nprogress/nprogress.css'

let baseURL = process.env.NODE_ENV === '"development"' ? process.env.BASE_URL : 'https://xx.xx.work'; //  定義基本url
// 定義請求頭

axios.defaults.baseURL = baseURL // Default base path

axios.defaults.headers.post['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.get['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.put['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.delete['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.patch['Content-Type'] = 'application/json;charSet=UTF-8'

// 添加請求攔截器
axios.interceptors.request.use((config) => {
  //   localStorage.getItem('token')
  let Token = store.getters['user/getUserInfo'].token;
  if (Token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token
    config.headers.Authorization = `Bearer ${Token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
})

// 添加響應攔截器
axios.interceptors.response.use((response) => {

    const res = response.data
    console.log(res, response)
    // Judging status code in interceptor reply returns corresponding processing information 處理狀態碼
    if (res.status == null) { // 無狀態碼，停止,並打印結果
      console.warn(res);
      return;
    }
    if (response.config.method === 'delete' || response.config.method === 'put' || response.config.method === 'post' ) { // 當方法爲編輯或者刪除時，提示操作成功！
      switch (response.data.status) {
        case 200 :
          message.success('操作成功')
          break;
        default:
          message.warning(`${response.data.msg}`)
          break;
      }
    }
    if (res.status !== 200) {
      // message.warn(`${res.msg || 'Error'}`)
      console.log('請求信息', res)
      if (res.status === 20001 || res.status === 70004 || res.status === 70006) {
        Modal.confirm({
          title: '警告信息',
          content: res.msg || 'Error',
          okText: '重新登錄',
          onOk() {
            store.dispatch('user/removeUserInfo').then(() => {
              router.push('/login')
            })
          },
          onCancel() {
          },
        });
      }

      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  (error) => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

// 封裝的方法

/**

 * 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(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
  })
}

/**

 * 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)
    })
  })
}

實際調用接口的文件： api/apiList.js

這裏是封裝axios的根文件

import * as API from "./index";
import {postApi} from "./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)
}

/**
 * @function 日曆詳情頁頭部信息
 * @param parmas (dayId)
 * @returns {Promise}
 */
function getDetailHeader(dayId, parmas) {
  return API.getApi(`/todo/day/${dayId}/statistic`, parmas)
}

/**
 * @function 日曆詳情頁表格信息
 * @param parmas (dayId)
 * @returns {Promise}
 */

function getDetailTable(dayId, parmas) {
  return API.getApi(`/todo/day/${dayId}`, parmas)
}

/**
 * @function 修改當前行數據
 * @param params (todoId)
 * @returns {Promise}
 */

function tableRowEdit(params) {
  return API.putApi('/todo/update', params)
}

/**
 * @function 刪除表格單行數據
 * @param params (todoId)
 * @returns {Promise}
 */
function tableRowDelete(params) {
  return API.deleteApi('/todo/delete', params)
}

/**
 * @function 獲取內容簡介下拉框數據
 * @param params
 * @returns {Promise}
 */
function selectDownContent(params) {
  return API.getApi('/comboBox/todoType', params)
}

/**
 * @function 獲取右邊抽屜頁的表格數據
 * @param params
 * @returns {Promise}
 */
function getDrawerTable(params) {
  return API.getApi('/project/search', params)
}

/**
 * @function 提交表單數據
 * @param {Object} params
 * @return {Promise}
 */
function submitFormFields(params) {
  return API.postApi('/todo/new', params)
}

/**
 * @function 修改modalForm模態框的接口
 * @param params
 * @returns {Promise}
 */
function editFormFields(params) {
  return API.putApi('/todo/update', params)
}

/**
 *
 *
 * 今日工作接口
 *
 *
 */

/**
 * @function 今日工作列表
 * @param params
 * @returns {Promise}
 */
function todayJobs(params) {
  return API.getApi('/work/today', params)
}

/**
 * @function 開始和結束接口（同一個）
 * @param params
 * @returns {Promise}
 */
function startSelectRowWork(params) {
  return API.postApi('/work/log', params)
}

/**
 * @function 暫停或重新開始接口（同一個）
 * @param params
 * @returns {Promise}
 */
function workingOrSuspend(params) {
  return postApi('/work/pauseOrRestart', params)
}

export {
  loginAPI,
  calendarAPI,
  getDetailHeader,
  getDetailTable,
  tableRowEdit,
  tableRowDelete,
  selectDownContent,
  getDrawerTable,
  submitFormFields,
  editFormFields,
  todayJobs,
  startSelectRowWork,
  workingOrSuspend
}

調用接口的登錄頁vue文件： components/login/index.vue

這裏是封裝axios的根文件

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

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

export default {
  name: "login",
  data() {
    return {
      hasErrors,
      form: this.$form.createForm(this, { name: "horizontal_login" })
    };
  },
  mounted: function() {
    this.$nextTick(() => {
      // To disabled submit button at the beginning.
      this.form.validateFields();
    });
  },
  methods: {
    handleSubmit(e) {
    	  // 這裏因爲已經封裝過了，就不用區別請求方式了，直接傳參就可，想看封裝方式，看上面文件apiList.js即可！
          loginAPI(values).then(res => {
            this.form.loading = false;
            let data = res.data ? res.data : res;
            console.log(res) 
         });
    },
    handleReset() {
      this.form.resetFields();
    }
  }
};

這裏是我近期總結的關於axios的封裝方法，適用於vue項目，可直接複製對應文件修改就可使用，感謝支持哈！可以的話點個贊！！！