uview封装http请求

现在随着时代的发展，越来越多的框架和ui库的产生，更加利于前端工程师进行快速上手和开发，其中不管是哪种框架，向后端发送http请求，获取后端返回的json数据都是必不可少的操作，那不管是什么http请求，为了更方便管理，都会进行统一的封装，一般的封装也主要大致分为三大部分，第一部分封装请求公共域名，第二部分封装请求主体，第三部分封装请求的api接口，现在话不多说，让我们来看看uview2.0库封装的http请求，主要面对小程序，H5和APP开发

首先我们先封装一个公共的域名 可以新建一个baseUrl.js文件

export default {

    /** 微信小程序不能走代理 */

  // #ifdef MP-WEIXIN

  baseURL:""

  // #endif

    /** 除了微信小程序都走代理 */

  // #ifndef MP-WEIXIN

  baseURL:""

  // #endif

}

在创建一个request.js封装文件 利用uview自带的api进一步封装http请求

import hostUrl from './hostUrl.js'
var request = function(app) {

  /** 初始化请求配置 */

  uni.$u.http.setConfig((config) => {
 
    config.baseURL = hostUrl.baseURL + "/getOrderData";
    return config

  })



  /** 请求拦截 */

  uni.$u.http.interceptors.request.use(config => {
   config.data = config.data || {}
  //请求头可以更改为json格式
   config.header['Content-Type'] = 'application/x-www-form-urlencoded'
    return config

  }, config => {

    /** 返回异常承诺对象 */

    return Promise.reject(config)

  })



  /** 响应拦截 */

  uni.$u.http.interceptors.response.use(response => {

    return response.data;    

  }, responseError => {

    /** 返回异常承诺对象 */

    return Promise.reject(responseError)

  })

}



/** 导出 */

module.exports = request;

导出在以后在main.js里引入封装请求

// 引入请求封装
require('./util/request/index')(app)

在根目录下新建个API文件夹，在文件夹下新建个index.js 用于存放你发请求的各种接口，便于管理

//实例
export const xxx = (data) =>{
	return uni.$u.http.post("xxxx",data);
}

最后引入页面进行使用 

//在api里定义的方法名用import导出
import {xxx} from "@/api/index/index.js"



最后使用
async getInfo(){
		const params = {
			userid:"xxx"
		}
		const res= await xxx(params)
		if(res.data&&res.result==200){
			console.log(res);
					
			}
		}

好了，各位小伙伴 ，就到这里了，作者也是个初入行业的小萌新，不过书山有路勤为径，学海无涯苦作舟，让我们一起努力共勉