vue axios介面封裝、Promise封裝、簡單的axios方法封裝、vue介面方法封裝、vue post、get、patch、put方法封裝
阿新 • • 發佈：2020-07-13
相信大家在做前後端資料互動的時候都會給請求做一些簡單的封裝
就像之前封裝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一下
然後在使用的頁面就不用再寫介面名稱了，直接使用封裝的方法名就可以了