前端请求封装

做了好几个项目, 之前请求都是写在页面上, 不仅增加页面代码量看起来乱糟糟的，后面有改动的时候看起来还贼难受。这次统一封装请求。

首先restful风格常用的有四个，对应增删改查。用一个文件封装起来：

我这起名为baseDao.js

let qs = require('qs')
import axios from 'axios'

let baseDao = class baseDao {
    //post请求
    static async post(data, apiUrl) {
        let formData = qs.stringify(data);
        return await new Promise((resolve, err) => {
            axios.post(apiUrl, formData).then(r => {
                resolve(r);
            }).catch(error => {
                err(error);
            })
        })
    }

    //get请求


    static async get(apiUrl) {
        return await new Promise((resolve, err) => {
            axios.get(apiUrl).then(r => {
                resolve(r);
            }).catch(error => {
                err(error);
            })
        })
    }

    static async uploadImagePost(file, apiUrl) {
        console.log(file, '传进来的图片文件');
        return await new Promise((resolve, err) => {
            let param = new FormData(); //创建form对象
            param.append('image', file, file.name);//通过append向form对象添加数据
            axios.post(apiUrl, param, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(r => {
                resolve(r);
            }).catch(error => {
                if (error == 'Error: Network Error') {
                    alert('网络异常，请检查网络是否能正常上网或服务器是否己启动！')
                }
                err(error)
            })
        })
    }

    static async put(data, apiUrl) {
        return await new Promise((resolve, reject) => {
            axios.put(apiUrl, qs.stringify(data), {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(r => {
                resolve(r)
            }).catch(e => {
                reject(e);
            })
        })
    }


    static async delete(apiUrl) {
        return await new Promise((resolve, reject) => {
            axios.delete(apiUrl, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(r => {
                resolve(r)
            }).catch(e => {
                reject(e);
            })
        })

    }
}

export default baseDao

然后api接口也要有一个文件

我这起名为api.js

let api = {
    //登录 获取令牌
    authorizations:'/merchant/authorizations',
    //登录信息
    me:'/merchant/me',
    //商品
    productsList:'/merchant/products',
    //店铺列表
    shops:'/merchant/shops',
    //上传图片
    uploadImage:'/common/upload-image',
    //规格
    specs:'/merchant/specs',
    //商品分类
    categories:'/merchant/product-categories'
}
export default api

然后是请求方法，在这使用以上两个文件：

命名为request

import api from './api'
import baseDao from "@/baseDao/baseDao";

/**
 * 。。。
 * @param response
 * @param vue 在页面传this 如果返回不是 201、200、204状态码 就显示element的输入框，
 *  如果不返回成功状态码就抛异常
 */
const statusJudge = function (response,vue){
    if(vue){
        if(response.status !== 201 && response.status !== 200 && response.status !== 204){
            vue.$message.warning(response.data.message);
            throw new Error(`${response.status}`);
        }
    }else{
        throw new Error(`${response.status}`);
    }
}
/**
 * 拼接get请求的参数
 * @param data
 * @returns {string}
 */
const createParamsStr = function (data){
    let str = '?';
    if(data){
        let tempArr = Object.keys(data)
        tempArr.forEach((item,index)=>{
            str += `${item}=${data[item]}`
            if(index !== tempArr.length - 1){
                str += '&'
            }
        })
    }
    return str
}

/**
 * 后面就是根据接口写的调用方法了
 */

const info = async function (vue){
    let response = await baseDao.get(api.me)
    statusJudge(response,vue);
    return response.data
}

const login = async function(data,vue){
    let response = await baseDao.post(data,api.authorizations);
    statusJudge(response,vue);
    return response.data
}

const categoriesList = async function (data,vue){
    let str = createParamsStr(data);
    let response = await baseDao.get(api.categories + str)
    statusJudge(response,vue);
    return response.data
}

export {
    /**
     * 登录 上传图片 登录信息
     */
    login,uploadImage,info,
    /**
     * 商品分类
     */
    categoriesList,
    /**
     * ......
     */
     ......
}

使用的时候按需导入就行

import {categoriesList} from "@/baseDao/request";

上面的是同步请求， 也有使用异步请求的情况：

这样封装代码看起来就要简洁很多了