uniapp和小程序请求api封装

方法一：

高级版，参考链接：zhuanlan.zhihu.com/p/97878575f…

(适合大项目）

第一步：

配置请求接口域名

//config.js

export default {
  tabs: ['home', 'article', 'profile'],
  // 请求接口路径
  servePath: 'http://...xxx/',
  // 图片服务器
  imagePath: 'http://...xxx/'
}

第二步：

存放api接口名

//api.js

module.exports = {
    homebanner: 'POST brandbanner/findxxxxx',//轮播图
    ...
}

第三步：

promise请求封装，把结果抛出去

//request.js

import configs from '../../config.js'

// 普通请求，文件下载请求类似这样写一个即可
export default function request(options) {
	/**
	 * @param {object} data 传参
	 * @param {string} method 请求方法
	 * @param {string} url
	 * @param {object} etcs request函数的其他属性，我暂时没用到
	 */
	const {
		data,
		method,
		url,
		server,
		etcs
	} = options
	return new Promise(function(resolve, reject) {
		uni.request({
			// 如果是config之外的服务器地址，则自定义传入
			url: server ? server + url : configs.baseURL + url,
			method: method,
			...etcs,
			data: data,
			success:(response)=>{
				resolve(response)
			},
			fail:(errors)=>{
				reject(errors)
			}
		})
	})
}

第四步：

最终一层请求封装

//network.js

import api from "../../common/network/api.js"
import request from "../../common/network/request.js"

/**
 * 匹配URL中的动态传参，并转换为body中对应的值
 * @param {string} url
 * @param {object} body
 */
const catchDynamicParam = (url, body) => {
  // 带有":"的是动态传参
  const reg = new RegExp(/:(\w+)/g);
  const matches = url.match(reg);
  let keys = [];
  if (matches) {
    for (let param of matches) {
      const key = param.split(':')[1];
      const value = body[key];
      url = url.replace(param, value ? value : 'undefined');
      keys.push(key);
    }
  }
  const result = { url, keys };
  return result;
};

export default function call(query,params, server, etcs) {
  const matches = query.split(' ');
  let method;
  let url;
  if (matches.length > 1) {
    method = matches[0];
    url = matches[1];
  } else {
    // 默认都是get请求
    method = 'GET';
    url = matches[0];
  }

  const catcher = catchDynamicParam(url, params);
  url = catcher.url;
  const catchKeys = catcher.keys;
  for (const key of catchKeys) {
    // 把动态传参除外
    if (key in params) {
      delete params[key];
    }
  }
  console.log(url,method,params,server)
  return request({
    url: url,
    method: method,
    data: params,
    server: server,
    etcs: etcs
  });
}

第五步：

使用

//pages/index

<script>
import call from '../../common/network/network.js'
import { homebanner } from '../../common/network/api.js'

export default {
	data() {
            return{}
	},
	created() {
	    this.get_homedata()
	},
	mounted() {

	},
	methods: {
	    get_homedata(){
	        console.log(homebanner)
		var params = {
		    request: {
			bid: 2,
			type: 1
		    }
		}
		call(homebanner,params).then(res=>{
		    console.log(res)
		})
	    }
	}
}
</script>

方法二：

普通版

参考了上面那个老哥的封装，自己又重新封装了一个

（通用，简单）

第一步：

封装请求函数

//../common/network/request.js

const baseURL = 'http://xxx/'
export default function request(options) {
	/**
	 * @param {object} data 传参
	 * @param {string} method 请求方法
	 * @param {string} url
	 * @param {object} etcs request函数的其他属性
	 */
	const {
		data,
		method,
		url,
		etcs
	} = options
	return new Promise(function(resolve, reject) {
		uni.request({
			url: baseURL + url,
			method: method,
			data: data,
			...etcs,
			success:(res)=>{
				resolve(res)
			},
			fail:(err)=>{
				reject(err)
			}
		})
	})
}

第二步：

每个页面都封装自己需要请求的接口函数，并return返回出去

//../common/network/home.js

import request from "./request.js"

//获取轮播图
export function gethomedata(){
	return request({
		url:'brandbanner/xxxxx',
		method:'post',
		data:{
			request:{
				bid:2,
				type:1
			}
		}
	})
}

第三步：

使用

// pages/index/index.vue

<script>
	import { gethomedata } from "../../common/network/home.js"
	export default {
		data() {
			return {}
		},
		created() {
			this._gethomedata()
		},
		methods: {
			_gethomedata(){
				gethomedata().then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>