uniapp规范开发（2）封装请求接口

普通封装

1. 在utils目录下创建reqGeneral.js 文件（内容如下）

let reqGeneral={
	req(obj){
		var method=obj.method||'GET';//请求方式，默认GET
		var url=obj.url||'';//请求路径
		var data=obj.data||{};//请求数据
		var header=obj.header||{};//请求头
		var success=obj.success;//成功回调函数
		var fail=obj.fail;//失败回调函数
		uni.request({
			url:url,
			method:method,
			data:data,
			header:header,
			success:( (res) => {
				if(res.statusCode==403||res.statusCode==401){
					//错误处理
				}else if(res.statusCode==200){
					success(res);
				}
			}),
			fail:((err)=>{
				fail(err)
			})
		})
	}
}
export default reqGeneral

2.main.js中引入和挂载

import reqGeneral from "./utils/reqGeneral.js"
Vue.prototype.$reqGeneral=reqGeneral

3.组件中使用

let reqObj={
      url:"https://baidu.com",
      method:"POST",
      success:(res)=>{
             this.data=res.data
      }
}
this.$reqGeneral.req(reqObj);

基于promise封装

1. 创建工具类：utils目录下reqPromise.js

function req(obj){
	return new Promise((resolve,reject)=>{
		var method=obj.method||"GET";//请求方式，默认GET
		var url=obj.url||"";//请求url
		var data=obj.data||{};//请求数据
		var header=obj.header||{
			'Content-Type':obj.contentType||'application/json'
		};//请求头
		var success=obj.success;//成功回调函数
		var fail=obj.fail;//失败回调函数
		uni.request({
			url:url,
			method:method,
			data:data,
			header:header,
			success:((res)=>{
				if(res.statusCode==403||res.statusCode==401){
					//错误处理
				}else if(res.statusCode==200){
					resolve(res);
				}
			}),
			fail:((err)=>{
				reject(err)
			})
		})
	})
}
export default req

2.main.js中引入和挂载

import reqPromise from "./utils/reqPromise.js"
Vue.prototype.$reqPromise=$reqPromise

3.创建api目录，目录下创建user.js（具体某一api请求实例）

import reqPromise from "@/utils/reqPromise.js"
export function login(data){ //登录
      return reqPromise({
             url:'test/login',
             method:'post',
             contentType:'application/x-www-form-urlencoded'
      })
}

4. 组件中使用

import {login} from "@api/user.js"
//methods
submit(){
      let data={
             phone:'123456'
      };
      login(data).then((res)=>{
             console.log(res)
      });
}

带token请求封装

1 在登录接口返回数据的那步，将token存进缓存中

uni.setStorage({
      key: 'token',
      data: res.data.access_token,
      success: function () {
             uni.getStorage({
                      key: 'token',
                       success: function (res) {
                               console.log(res.data);
                       }
              });
       }
});

2. 创建工具类：utils目录下reqToken.js

function reqToken(obj) {
    try {
        const token = uni.getStorageSync('token');
        const username = uni.getStorageSync('username');
		var url=obj.url||"";//请求路径
		var method=obj.method;//请求方法
		var data=obj.data||{};//请求数据
        if (token) {
			var header=obj.header||{
				'Content-Type':obj.contentType||'application/json',
				'Authorization' :token
			};
        }else{
            uni.navigateTo({
                url: '../../login/login/login' //跳转到登录页面
            });
            return;
        }
    }catch (err) {
        console.log(err)
    }
	return new Promise((resolve,reject)=>{
		uni.request({
			url:url,
			method:method,
			data:data,
			header:header,
			success:((res)=>{
				if(res.statusCode==403||res.statusCode==401){
					//错误处理
				}else if(res.statusCode==200){
					resolve(res);
				}
			}),
			fail:((err)=>{
				reject(err)
			})
		});
	});
}
export default reqToken;

3.在页面中使用

import reqToken from "@/utils/requestToken.js"
onShow(){
      reqToken({
             url:'./test/url',
             method:'POST',
      }).then((res)=>{
             console.log(res)
      });
}

注意：

在前端开发中，一定不要在各个页面写请求，尽量将所有请求为api下的一些实例请求js，这样使代码更具可读性和易维护性

很赞哦！ (0)