vue.js 接口形式

前言：首先需要自己写接口的封装方法。我这里是基于uni-app封装了一个接口方法，下面内容使用了request的都是基于该封装方法。

/**
 * 请求
 */
function http({
    url,
    method = 'get',
    data,
    header = {}
}) {
    return new Promise(async (reslove, reject) => {
        uni.request({
            url: config.BASE_API + url,
            method: method,
            data: data,
            header: header,
            complete: res => {
                if (res.statusCode === 200) {
                    reslove(res.data);
                } else {
					if (res.data) {
						const { data: { error, msg } } = res;
						message.error(msg || error || '服务异常！');
					}
                    reject()
                }
            }
        });
    })
}

export default http

 接口文件页面导入：

import request from '../core/request';

1.常用写法

// postForm为自己封装的表单方法
export const login = params => { return postForm('rest/login', params) }

2.接口参数直接写在接口里面

export default {
    getContent() {
        return request({
			url: '/devops/lemon/queryContent',
            data: {
				BM: '430100',
                pageNumber: 1, 
                pageSize: 20 
			}
		});
	},
}
---------------接口调用---------------
methods: {
    getContent(id) {
        this.$api.service.getContent().then(res => {
            var content = res.data.find(v => v.CATEGORY == id);
        })
    }
}

3.根据调用接口的传参变换接口参数

// fetch为封装的get请求
export const showInfo = params => { return fetch(`/lemon/getInfo/${params.infoType}/${params.infoId}`)}
---------------接口调用---------------    
     getDetail(value) {
            const params = {
                infoType: value,
                infoId: this.fQuery.xmdm,
            };
            showInfo(params)
                .then(res => {
                    if (res.code == 200 && res.data) {
                        this.stepData = res.data;
                    }
                })
                .catch(err => {
                    this.stepData = {};
                });
        },

4.根据type不同，调用不同接口，参数一致

getRecord(type, id) {
        const _uris = {
            TD: '/devops/lemon/queryRecord',
            CK: '/devops/lemon/queryList',
        };
        if (!type) {
            console.warn('请传入 type 字段!');
        }
        return request({
            url: _uris[type],
            data: {
				id: id,
                pageNumber: 1,
                pageSize: 10
			}
        });
    },

5.接口中处理参数

export const saveInfo = params => {
      if (params.url && typeof params.url === 'string' && !params.url) {
           params.url = []
      }
      if (params.isBuilding && params.isBuilding === '否') {
          params.floorArea = 0
      }
      for (const key in params) {
           // 过滤空字符串数据，保存不做校验
          if (Object.hasOwnProperty.call(params, key) && params[key] === ''){
               // 删除对象上的属性
               Reflect.deleteProperty(params, key)
          }
      }
      return post('rest/lemon/save', { ...params, gm: true })
}

6.参数相同，接口不同，同时返回

export default {
    getPayDetail(data) {
		const one = request({
			url: '/lemon/queryOneList',
			data
		});
        const two = request({
			url: '/lemon/queryTwoList',
			data
		});
        const three = request({
			url: '/lemon/queryThreeList',
			data
		});
        // Promise.all可接收Array，Map，Set类型
		return Promise.all([one,two,three]).then(res => {
			return res;    //同时返回三个接口数据
		})
	},
}

7.参数不同，接口不同，同时返回

//参数整理
function doquery({alias, querydata}) {
	const _querdata = Object.keys(querydata).reduce((arr, k) => {
		arr.push({
			key: k,
			value: querydata[k]
		});
		return arr;
	}, [])
	const _data = {
		alias,
		querydata: JSON.stringify(_querdata),
	}
	return request({
		url: '/api/lemon/doQuery',
		method: 'POST',
		data: _data,
		header: {
			'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
		}
	})
}
export default {
	getMapRes(data) {
		const one = doquery({
			alias: 'TDGPZYLB',
			querydata: {
				type: 'sky',
				end: new Date().getTime()
			}
		}).then(res => res.rows);
		const two = doquery({
			alias: 'TDGPZYLB',
			querydata: {
				type: 'land',
				end: new Date().getTime()
			}
		}).then(res => res.rows);
		return Promise.all([one, two]).then(res => {
			return res[0].concat(res[1])
		})
	}
}