前言:在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~~~

如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!

Logo

前往低代码交流专区

更多推荐