相信大家在做前后端数据交互的时候都会给请求做一些简单的封装
就像之前封装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一下
然后在使用的页面就不用再写接口名称了,直接使用封装的方法名就可以了
vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装