單表CURD-基於事務-基於代理
阿新 • • 發佈:2020-07-12
相信大家在做前後端資料互動的時候都會給請求做一些簡單的封裝
就像之前封裝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 = {}) { returnnew Promise((resolve, reject) => { axios.post(url, data) .then(response => { resolve(response.data) }, err => { reject(err) }) }) } /** * 封裝get方法 * @param url * @param data * @returns {Promise} */ export functionget (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一下
然後在使用的頁面就不用再寫介面名稱了,直接使用封裝的方法名就可以了