vue axios接口封裝、Promise封裝、簡單的axios方法封裝、vue接口方法封裝、vue post、get、patch、put方法封裝

相信大家在做前后端數據交互的時候都會給請求做一些簡單的封裝
就像之前封裝ajax方法一樣
axios的封裝也是一樣的簡單
下面這個就是封裝的axios的方法，require.js

import axios from 'axios'

axios.defaults.timeout = 5000
axios.defaults.baseURL = '接口名稱-共用部分'

/**
 * 封裝post請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post (url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data)
            .then(response => {
                resolve(response.data)
            }, err => {
                reject(err)
            })
    })
}

/**
 * 封裝get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get (url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        })
            .then(response => {
                resolve(response.data)
            })
            .catch(err => {
                reject(err)
            })
    })
}

/**
 * 封裝patch請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch (url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.patch(url, data)
            .then(response => {
                resolve(response.data)
            }, err => {
                reject(err)
            })
    })
}

/**
 * 封裝put請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put (url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data)
            .then(response => {
                resolve(response.data)
            }, err => {
                reject(err)
            })
    })
}

只要在main.js里面引入就可以

import {post, get, patch, put} from './untils/require'
Vue.prototype.$post = post
Vue.prototype.$fetch = get
Vue.prototype.$patch = patch
Vue.prototype.$put = put

當你需要在頁面中使用的時候不用再做引入操作

this.$post('接口名稱').then((res) => {
    console.log(res)
     // 成功的方法回調
    }).catch(function (err) {
      console.log(err)
      // 失敗的方法回調
    })

當然了這個封裝的方法是根據個人的習慣來做的
如果想封裝的再細致一些，那就可以把方法名稱再做一下封裝
把接口名稱的這一塊封裝到一個js里面，然后module.exports一下
然后在使用的頁面就不用再寫接口名稱了，直接使用封裝的方法名就可以了