前言:在vue项目中我们经常会使用axios去请求后台数据做交互,今天整理了一下怎么使用promise去封装axios,方便我们管理。
在src下创建api文件夹,写入两个js文件
request.js(请求封装)
// const baseUrl = window.location.protocol + "//" + document.domain;
const headers = {
'User-Agent': 'xxxx'
}
const request = (url, method, data) => {
return new Promise((resolve, reject) => {
vant.Toast.loading({
message: '加载中...',
forbidClick: true
});
if (method === 'GET') {
axios({
method: method,
url: baseUrl + url,
params: data,
}).then(res => {
if (res.data.status === 1) {
Toast.clear()
resolve(res.data);
} else {
Toast(res.data.message);
resolve(res.data.message);
}
})
.catch(err => {
Toast.clear()
reject(err.data.message); //失败
});
} else if (method === 'POST') {
axios({
method: method,
url: baseUrl + url,
data: qs.stringify(data),
}).then(res => {
if (res.data.status === 1) {
Toast.clear()
resolve(res.data);
} else {
Toast(res.data.message);
resolve(res.data.message);
}
})
.catch(err => {
Toast.clear()
reject(err.data.message); //失败
});
}
})
}
export default request
index.js(接口)
import request from './request.js'
const api = {}
//测试get方式的
api.ceshi = () => request('/small4/banner/list', 'GET');
//get拼接写法的
api.getScreenList = childrenCode => request(`/report/history/${childrenCode}`, 'GET')
//post写法
api.up_video = params => request(`/parent/audio/uploadAudio`, 'POST', params)
export default api
main.js全局注册
import api from './api/index.js'
Vue.prototype.$api = api
组件中使用
methods: {
getAxios() {
this.$api.ceshi().then(res => {
console.log(res);
})
}
},
感觉写的已经很详细了,希望能帮到大家~
小程序篇:微信小程序使用promise封装wx.request()请求
end~~~
如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!