简易Uniapp请求封装

文章是vue2+js，的uniapp,请求封装

封装可以参考Uni官网给出的案例

1.需要建立新的项目，utils文件夹用来放我们的请求，http.js(也就是vue中的request)

import { BaseUrl } from "./config";

/*
封装请求工具类
*/
const http=(url,data={},method="get")=>{
	return new Promise((resolve,reject)=>{
		uni.request({
		    url: url, //仅为示例，并非真实接口地址。
		    data:data,
			method:method,
			timeout:30000,
			header: {
		      Authorization: uni.getStorageSync('token') //自定义请求头信息
		   },
		    success: (res) => {
		        // 成功的返回
				resolve(res.data)
		    },
			fail:(res)=> {
				reject(res)
			}
		});	
	})
}
/**
 * 拦截器
 */
uni.addInterceptor('request', {
  invoke(args) {
    // request 触发前拼接 url 
    args.url = BaseUrl+args.url
  },
  success(args) {
    // 请求成功后，修改code值为1
    // args.data.code = 1
  }, 
  fail(err) {
    // console.log('interceptor-fail',err)
  }, 
  complete(res) {
    // console.log('interceptor-complete',res)
  }
})
//封装方法
const get=(url,params)=>{
	return http(url,params,'get')
}
const post=(url,data)=>{
	return http(url,data,'post')
}
export default{
	get,
	post
}

2.考虑到我们的api统一化的管理，这里我又建立了一个api.js用来统一封装接口

/**
 * 实现API的统一化管理
 */
import http from "@/utils/http.js"
//登录
const login=(data)=>http.post('student/checklogin',data)

export{
	login,
} 

3.资源配置，也就是接口前缀，这里我建立一个config.js用来配置接口前缀

/**
 * 统一配置
 */
const BaseUrl="http://estate.xxx"
export {
	BaseUrl
}