Vue Axios 请求方法的二次方装

简介

因为项目后端整体采用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) => {});
    },