精华内容
参与话题
问答
  • uniapp请求封装

    2020-06-16 10:58:35
    在main.js直接引入 import http from './static/js/http.js' Vue.prototype.$http=http; 组件中使用

    在main.js直接引入

    import http from './static/js/http.js'
    Vue.prototype.$http=http;

    组件中使用

    展开全文
  • uniapp 请求封装

    2020-08-18 11:30:25
    https://blog.csdn.net/qq_36538012/article/details/107224087?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_...
    展开全文
  • 全局请求封装:request.js // 全局请求封装 const token = uni.getStorageSync('token'); import service from "./service.js"; // 请求字典 export default (url, method, params) => { uni.showLoading({ ...

    目录结构:
    uniapp 请求封装,拦截器:请求拦截、响应拦截

    主要就是request.jsapi.js文件,其他是我这边的业务需求文件。

    1. 全局请求封装:request.js
    // 全局请求封装
    const token = uni.getStorageSync('token');
    import service from "./service.js";  // 请求字典
    
    
    export default (url, method, params) => {
    	uni.showLoading({
    		title: "加载中"
    	});
    	const api = service.filter(item => {
    		return item.url === url; // 匹配serviceId对应的接口
    	});
    
    	return new Promise((resolve, reject) => {
    		wx.request({
    			url: "https://www.piop.cn/api" + url,
    			method: method,
    			header: {
    				token: token
    			},
    			data: {
    				serviceId: api[0].serviceId,
    				...params
    			},
    			success(res) {
    				resolve(res.data);
    			},
    			fail(err) {
    				reject(err);
    			},
    			complete() {
    				uni.hideLoading();
    			}
    		});
    	});
    };
    

    说明:
    uniapp 请求封装,拦截器:请求拦截、响应拦截

    总之请求拦截操作就放在7-14行中间,响应拦截操作就放在success()fail()complete()函数体里。


    1. 接口封装:api.js
    import request from "./request.js"
    
    
    const token = uni.getStorageSync('token');
    export default {
    	// 密码登录
    	passwordLogin(params) {
    		return request("/platform/metadata/logon", "GET", params)
    	},
    
    	// 短信登录
    	noteLogin(params) {
    		return request("/platform/metadata/login", "GET", params)
    	},
    
    	// 获取验证码:用于短信登陆、密码找回、用户注销
    	getAuthCode(params) {
    		return request("/platform/metadata/sms", "GET", params)
    	},
    
    	// 获取注册账号验证码
    	getRegistAuthCode(params) {
    		return request("/platform/metadata/sms1", "GET", params)
    	},
    
    	// 登录者信息
    	getMyInfo(params) {
    		return request("/platform/metadata/bindinfo", "GET", params)
    	},
    
    	// 注册账号
    	registerAccount(params) {
    		return request("/platform/metadata/register", "GET", params)
    	},
    
    	// 找回密码
    	retrievePassword(params) {
    		return request("/platform/metadata/back", "GET", params)
    	},
    
    	// 注销账号
    	offAccount(params) {
    		return request("/platform/metadata/cancel", "GET", params)
    	},
    	
    }
    

    调用接口:
    uniapp 请求封装,拦截器:请求拦截、响应拦截

    结果:

    在这里插入图片描述
    在这里插入图片描述

    动态的serviceId成功加上!
    请求字典是啥呢:
    在这里插入图片描述

    展开全文
  • uniApp 请求接口封装

    2020-06-05 17:49:47
    commons目录下加request.js // 引入配置文件 import config from "./config.js"; import User from "./user.js"; export default{ ... baseUrl:config.webUrl, ... 'Content-Type':'application/json;...

    commons目录下加 request.js

     

    // 引入配置文件
    import config from "./config.js";
    import User from "./user.js";
    export default{
    	config:{
    		baseUrl:config.webUrl,
    		header:{
    			'Content-Type':'application/json;charset=UTF-8',
    			'Content-Type':'application/x-www-form-urlencoded',
    			'Authorization':uni.getStorageSync('token'),
    		},
    		data: {},
    		method: "GET",
    		dataType: "json",
    		withCredentials: true
    	},
    	request(options = {}){
    		// options.header || 
    		options.header = this.config.header;
    		options.method = options.method || this.config.method;
    		options.dataType = options.dataType || this.config.dataType;
    		options.url = this.config.baseUrl+options.url;
    		// TODO:token增加等操作
    		if (options.Authorization) {
    			// 验证用户是否登录
    			if (!this.checkToken(options.checkToken)) return;
    			// 验证用户操作权限(验证是否绑定手机号码)
    			if (!this.checkAuth(options.checkAuth)) return;
    			options.header.Authorization = User.token;
    		}
    		return uni.request(options);
    	},
    	// get 方法
    	get(url,data,options={}){
    		options.url = url;
    		options.data = data;
    		options.method = 'GET';
    		return this.request(options);
    	},
    	// post 方法
    	post(url,data,options={}){
    		this.config.header.Authorization = uni.getStorageSync('token');
    		options.url = url;
    		options.data = data;
    		options.method = 'POST';
    		return this.request(options);
    	},
    	// 错误处理
    	errorCheck(err,res,errfun = false,resfun = false){
    		console.log(err)
    		if (err) {
    			typeof errfun === 'function' && errfun();
    			uni.showToast({ title: 'fail to load',icon:"none" });
    			return false;
    		}
    		
    		if (res.data.code) {
    			typeof errfun === 'function' && resfun();
    			uni.showToast({ title: res.data.errorMessage,icon:"none" });
    			return false;
    		}
    		return true;
    	},
    }

     

    main.js

    import request from "./commons/request.js";
    Vue.prototype.$http = request;

    引入示例

    async register(data) {
        let [err, res] = await this.$http.post('/userCt/login', {
    				   //请求账号密码登录接口
    				password: this.password,
    				userName: this.mobile
    			});
    // 这里是错误的回调,如果请求的接口错误,或者需要自定义返回的日志,可以在这里处理
    			if (!this.$http.errorCheck(err, res)) return;
    			if (res.data.code == 0) {
    				//这里这里是成功的回调
    			}
    }

     

    展开全文
  • uniapp请求函数封装

    2020-04-23 16:35:54
    const httpRequestGet = (url, data) ... { //GET 请求 let httpDefaultOpts = { url: baseUrl + url, data: data, method: 'get', header: { 'X-Requested-With': 'XMLHttpRequest', "Accept": "app...
  • uniapp 请求数据封装

    2020-09-02 17:04:16
    export default function $http...const { url, data } = options const dataObj = { user_id:‘xxxx’, …data } return new Promise ((reslove,reject)=>... uniCloud.callFunction({ ... if(res.result.code === 200){
  • uniapp请求高级封装

    2020-09-15 19:38:12
    1.根目录下创建api api/errdata.js // 提示 const errdata = { errlist(err) { uni.showToast({ icon: 'none', ...// 封装请求:get post // 引进提示 import {errdata} from 'api/errdata.js' // GET le
  • uniapp自己封装请求拦截

    千次阅读 2020-04-08 20:41:48
    大纲图片描述代码描述request.jsindex.jsindex.ue 图片描述 代码描述 request.js export function packRequest(obj){ let { url, method, params, data,callback} = obj // method = method=='undefined'?...
  • uniapp 请求后端的封装

    2020-11-11 14:48:06
    uniapp 请求后端的封装 // 请求后端的封装 // 请求的后端url前缀,形如:http://ip:port/,一般会在名为config.js中配置 const BACKENDURL = 'http://192.168.190.171:8888/'; // 类型 const TYPE_JSON = ...
  • uniapp 数据请求封装以及通用使用

    万次阅读 2019-01-28 15:16:02
    // 参数: url:请求地址 param:请求参数 way:请求方式 res:回调函数 function urlRequest(url, param, way, res) { let deviceId = '' uni.getStorage({ key: 'deviceIds', success: function(res) ...
  • uniapp request请求封装

    2020-07-27 17:39:43
    js代码 const ApiUrl = ''; const ajax = (opt) => { uni.showLoading({ title: '加载中', mask:true }); opt = opt || {}; opt.url = opt.url || ''; opt.data = opt.data || null;... // "Conte
  • uniApp数据请求封装

    2020-11-22 22:27:57
    /**********************************************httpClient.js**********************************************************************************/ import { baseUrl } from '../config';...
  • uni.request({ url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: ...
  • uniapp 请求方式嵌套一层Promise用async和await的形式去写代码,错误请求统一处理,类同步方式写代码告别回调地狱
  • uniapp封装请求

    2020-05-02 20:21:42
    let baseUrl = '...function post(url,data={}){ return new Promise((resolve,reject)=>{ uni.request({ url:baseUrl+url, method:'POST', data:data, ...
  • uniapp请求接口封装(接口写在单独js文件夹内)第一步第二步第三步以上就是uniapp的请求接口封装了 第一步 1、在项目根目录下新建app目录; 2、在app目录下新建http.js文件用于封装request请求,代码如下: /* @...

空空如也

1 2 3 4 5 ... 9
收藏数 162
精华内容 64
关键字:

uniapp请求封装