uniapp封装ajax请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp封装ajax请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

新建一个request.js

import '@/common/api/interceptor.js'; // 引入拦截器文件
export default{
	common:{
		baseUrl:"http://localhost:3000/api",
		data:{},
		header:{
			"Access-Control-Allow-Origin":"*",
			"Content-Type":"application/json",
			"Content-Type":"application/x-www-form-urlencoded"
		},
		method:"GET",
		dataType:"json"
	},
	//封装为选项对象
	request( options={} ){
		
		uni.showLoading({
		    title: '加载中'
		});
		
		options.url = this.common.baseUrl + options.url;
		options.data = 	options.data || this.common.data;
		options.header = options.header || this.common.header;
		options.method = options.method || this.common.method;
		options.dataType = 	options.dataType || this.common.dataType;
		return new Promise((res,rej)=>{
			uni.request({
				...options,
				success: (result) => {
					// if(result.statusCode===401)  进行类似过滤器的操作
					if(result.statusCode != 200){
						// 使其可以使用catch
						return rej();
					}
					setTimeout(function () {
					    uni.hideLoading();
					}, 1500);
					let data = result.data;
					// res里面就是请求体了 可以直接获取自己定义的code 和数据
					res(data);
				}
			})
		})
	}
}

这样就把uniapp的回调ajax封装为了resolve,这里还类似封装了axios的拦截器

// utils/interceptors.js



// 请求拦截器
uni.addInterceptor('request', {
  // 在发送请求之前执行
  invoke(request) {
    // 在请求发送前可以进行一些操作，例如添加请求头、设置认证信息等

	    request.header = {
	      'Content-Type': 'application/json', // 设置 Content-Type 请求头
	      'Authorization': 'Bearer your-token', // 设置 Authorization 请求头
	    };
    console.log('------请求拦截器------');
    return request;
  },
  // 请求出错时执行
  fail(error) {
    console.error('请求拦截器出错', error);
    return error;
  },
});

// 响应拦截器
uni.addInterceptor('response', {
  // 在响应返回之后执行
  invoke(response) {
    // 对响应数据进行处理
    console.log('响应拦截器');
	response.header={
		"Access-Control-Allow-Origin":"*"
	}
    return response;
  },
  // 响应出错时执行
  fail(error) {
    console.error('响应拦截器出错', error);
    return error;
  },
});

在其他compoent的js中使用文章来源地址https://www.toymoban.com/news/detail-685012.html

import http from '@/common/api/request.js';
//初始化
var init=()=>{
	http.request({url:"/index_list/data",
	}).then(res=>{
		console.log("封装的结果",res),
		topBar.value=res.data.topBar
	}).catch(e=>{
		console.log(e)
	})