简介
因为项目后端整体采用Restful api 进行设计,所以我们前端需要对axios的所有请求进行二次独立的封装,来满足后端接口的要求,所以,便对axios的get、post、put、delete等请求方式进行二次封装
// 对axios各种请求的二次封装
import $api from './apiConfig' //接口
import axios from './index' //请求
import qs from 'qs'
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
export function getRequest(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get($api.api + url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post formData 格式请求
* @param url
* @param data
* @param isFromData
* @returns {Promise}
*/
export function postRequest(url, data = {}, isFromData) {
return new Promise((resolve, reject) => {
if (isFromData) {
axios.post($api.api + url, qs.stringify(data), {
headers: { "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8' }
})
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
} else {
axios.post($api.api + url, data, {
headers: { "Content-Type": 'application/json' }
}).then(response => {
resolve(response.data)
}), err => {
reject(err)
}
}
})
}
/**
* 封装put 请求
* @param url
* @param data
* @returns {Promise}
*/
export function putRequest(url, data = {}, isFromData) {
return new Promise((resolve, reject) => {
if (isFromData) {
axios.put($api.api + url, qs.stringify(data), {
headers: { "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8' }
}).then(response => {
resolve(response.data);
}),
err => {
reject(err)
}
} else {
axios.put($api.api + url, data, {
headers: { "Content-Type": 'application/json' }
}).then(response => {
resolve(response.data);
}),
err => {
reject(err)
}
}
})
}
/**
* 封装delete 请求
* @param url
* @param data
* @returns {Promise}
*/
export function deleteRequest(url, params = {}) {
return new Promise((resolve, reject) => {
axios.delete($api.api + url, { params: params }).then(response => {
resolve(response.data);
}),
err => {
reject(err)
}
})
}
在main.js上引入,并将其挂载到Vue的prototype上,后面直接通过this调用。
// 获取请求方式的二次封装
import { getRequest, postRequest, putRequest, deleteRequest } from "./axios/request";
// 请求方式全局挂载--直接通过this调用
Vue.prototype.qs = Qs
Vue.prototype.getRequest = getRequest
Vue.prototype.postRequest = postRequest
Vue.prototype.putRequest = putRequest
Vue.prototype.deleteRequest = deleteRequest
使用
this.getRequest("url", '参数')
.then((res) => {
console.log(res);
})
.catch((err) => {});
},