vue axiosインタフェースパッケージ、Promiseパッケージ、簡単なaxiosメソッドパッケージ、vueインタフェースメソッドパッケージ、vue post、get、patch、putメソッドパッケージ

12015 ワード

みんなが前後のデータのインタラクションをする時にいくつかの簡単なパッケージを要求すると信じています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)
            })
    })
}

ここにいる限り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をクリックして使用するページにインタフェース名を書く必要はありません.パッケージのメソッド名をそのまま使えばいいです.