uni-app 统一请求处理 请求拦截器 响应拦截器 请求封装

发布于:2025-02-11 ⋅ 阅读:(26) ⋅ 点赞:(0)

封装API接口

import {http} from '../utils/request.js'
export function login(code){
	return http({
			url:'/wx/getSession',
			 method: 'GET',
			 data:{
				code
			 }
		})
}

调用接口

import {login,test,phoneMessage,updateAvatar} from '../../api/user.js'
function userLogin(){ 
	login(code.value).then(r=>{
		toekn.value=r.data.token
		uni.setStorageSync('Authorization',toekn.value)
	})
}

export function updateAvatar(uri){
	return uni.uploadFile({
			url:'/wx/uploadAvatar',
			filePath:uri,
			name:'file',
			 headers: {
			    'Content-Type': 'application/json; charset=UTF-8',
			  },
	})
}

请求拦截器

const config={
	
	invoke(options){ //请求前
		//options为封装方法传递的参数

		if(!options.url.startsWith('http')){ //不是与http开头
			options.url=baseUrl+options.url //拼接请求地址
		}
		
		options.timeout=1000*5 //配置超时时间 默认60秒
		
		options.header = { //添加原有的头信息
		      ...options.header,
		    };
		
		const token = uni.getStorageSync('Authorization'); //添加token
		if(token){
			options.header.Authorization=token //实例
		}
		
	}
}

uni.addInterceptor('request',config) //添加请求拦截 config为配置

响应拦截器

const http = (options) => {
  // uni.showLoading({
  //   mask: true,
  //   title: "数据加载中",
  // });
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success(res) {
		  
			resolve(res.data)
      },
      // 响应失败
      fail(err) {
		  
        uni.showToast({
          icon: "none",
          title: "网络错误, 换个网络试试",
        });
        reject(err);
		
      },
      complete() {
        uni.hideLoading();
      },
    });
  });
};

文件上传

uni.addInterceptor("uploadFile", config);//文件上传拦截