vue使用promise封装axios

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

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