精华内容
下载资源
问答
  • 说明: 总之请求拦截操作就放在7-14行中间,响应拦截操作就放在success()、 fail()、 complete()函数体里。 2. 接口封装:api.js import request from "./request.js" export default { // 密码登录 ...

    目录结构:

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

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

    1. 全局请求封装:request.js

    // 全局请求封装
    export default (url, method, params) => {
    const token = uni.getStorageSync('token');
    	uni.showLoading({
    		title: "加载中"
    	});
    	if(!token ){
    		// 执行没有登录的逻辑
    
    		return;
    	}
    	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()函数体里。


    2. 接口封装:api.js

    import request from "./request.js"
    
    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 请求封装,拦截器:请求拦截、响应拦截

    结果:
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • uniapp 之封装uni.request 实现响应拦截

    千次阅读 2020-08-31 16:30:14
    uniapp 之封装uni.request 实现响应拦截 功能介绍: 简易封装uni.request 响应拦截器 封装代码: let baseUrl = "" if(process.env.NODE_ENV === 'development'){ baseUrl="开发基地址" }else{ baseUrl="生产基地址...

    uniapp 之封装uni.request 实现响应拦截

    功能介绍: 简易封装uni.request 响应拦截器

    封装代码:

    let baseUrl = ""
    if(process.env.NODE_ENV === 'development'){
    	baseUrl="开发基地址"
    }else{
    	baseUrl="生产基地址"
    }
    
    function request({
    	url,
    	method,
    	data,
    	params
    }) {
    	return new Promise((resolve, reject) => {
    		return uni.request({
    			url: baseUrl + url,
    			data,
    			method,
    			params,
    			success: (res) => {
    			//返回数据及处理
    				if (res.data.code == 200) {
    					resolve(res.data)
    				} else if (res.data.code == 403) {
    					console.log("权限")
    				}
    			},
    			fail: () => {
    				console.log('request fail', err)
    				reject(err)
    			}
    		})
    	})
    }
    //暴露
    export {
    	request
    }
    
    

    api/http.js文件:

    import { request } from "@/until/request.js"
    function findList() {
        return request({
            url: "地址",
            method: "GET",
        });
    }
    //暴露
    export {findList}
    

    页面使用:

    <script>
    import {findList} from "@/api/http.js"
    export default {
    	data() {
    		return {
    			resList:[]
    		}
    	},
    	methods: {
    	async findListvue() {
    		let res = await findList()
    		this.resList=res.details.list
    		}
    	},
    	onLoad() {
    		this.findListvue()
    	},
    };
    </script>
    
    

    结束啦 很简单的 一个封装 希望不要吐槽

    展开全文
  • uniapp 拦截

    千次阅读 2020-12-21 14:24:59
    uni.getStorageSync('authenticate') config.header["authenticate"] = token console.log("token", token) } else { console.log("不需要token") } return config }, // 响应拦截器配置 beforeResponse: (response)...
    
    export default {
      config: {
        baseURL: 'https://xxx.xxx.com',
        header: {},
        dataType: 'json',
        // #ifndef MP-ALIPAY || APP-PLUS
        responseType: 'text',
        // #endif
        // 注:如果局部custom与全局custom有同名属性,则后面的属性会覆盖前面的属性,相当于Object.assign(全局,局部)
        custom: {
          auth: true
        }, // 全局自定义参数默认值
        // #ifdef MP-ALIPAY || MP-WEIXIN
        timeout: 30000,
        // #endif
        // #ifdef APP-PLUS
        sslVerify: true,
        // #endif
        // #ifdef H5
        // 跨域请求时是否携带凭证(cookies)仅H5支持(HBuilderX 2.6.15+)
        withCredentials: false,
        // #endif
        // #ifdef APP-PLUS
        firstIpv4: true, // DNS解析时优先使用ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
        // #endif
        // 局部优先级高于全局,返回当前请求的task,options。请勿在此处修改options。非必填
        // getTask: (task, options) => {
        // 相当于设置了请求超时时间500ms
        //   setTimeout(() => {
        //     task.abort()
        //   }, 500)
        // },
        // 全局自定义验证器。参数为statusCode 且必存在,不用判断空情况。
        validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置
          console.log("---全局验证Code---", statusCode)
        }
      },
      // 请求拦截器配置
      beforeRequest: function (config) {
        console.log(config, "------")
        if (config.custom.auth) {
          // token
          let token = uni.getStorageSync('authenticate')
          config.header["authenticate"] = token
          console.log("token", token)
        } else {
          console.log("不需要token")
        }
        return config
      },
      // 响应拦截器配置
      beforeResponse: (response) => { /*  对响应错误做点什么 (statusCode !== 200)*/
        console.log(response, "????????")
        if (!response.config.custom.auth && response.statusCode == 200) {
          console.log("保存token")
          uni.setStorageSync('authenticate', response.data.token)
          return response
        }
        if (response.statusCode >= 500) {
          console.log("服务器异常")
          return Promise.reject(response)
        } else if (response.statusCode == 401) {
          console.log('...........................')
    
          //登录判断
          uni.navigateTo({
            // #ifdef H5
            url: '/pages/login/login',
            //#endif
            // #ifdef MP-WEIXIN 
            url: '/pages/wxlogin/wxlogin',
            //#endif
            // #ifdef APP-PLUS
            url: '/pages/login/login',
            //#endif
    
          });
          return Promise.reject(response)
        } else {
          console.log("---继续执行---")
          return Promise.resolve(response)
        }
      }
    }
    
    
    展开全文
  • 20200421 uni-app 封装请求拦截、响应拦截 安装 npm install uni-request --save 封装方法 import uniRequest from '../uni-request/index.js'; import config from '../config/index.js' // 全局域名配置 /** * ...

    Uni-app

    20200421 uni-app 封装请求拦截、响应拦截

    安装

    npm install uni-request --save

    封装方法
    import uniRequest from '../uni-request/index.js';
    import config from '../config/index.js' // 全局域名配置
    
    /**
     * 提供的方法有
     * uniRequest.request(config)
     * uniRequest.get(url[, config])
     * uniRequest.delete(url[, config])
     * uniRequest.head(url[, config])
     * uniRequest.options(url[, config])
     * uniRequest.post(url[, data[, config]])
     * uniRequest.put(url[, data[, config]])
     * uniRequest.patch(url[, data[, config]])
     * 
     */
    
    // 全局配置
    uniRequest.defaults.baseURL = config.baseUrl;
    
    // 请求拦截
    uniRequest.interceptors.request.use(
    	request => {
    		//配置基本信息	
    		return request;
    	},
    	err => {
    		console.log('请求失败');
    		return Promise.reject(err);
    	});
    
    // 响应拦截
    uniRequest.interceptors.response.use(function(response) {
    	console.log('返回进入拦截成功')
    	return Promise.resolve(response);
    }, function(err) {
    	if (err && err.response) {
    		switch (err.response.status) {
    		  case 301: err.message = '请求的数据具有新的位置且更改是永久的'; break
    		  case 302: err.message = '请求的数据临时具有不同 URI'; break
    		  case 304: err.message = '未按预期修改文档'; break
    		  case 305: err.message = '必须通过代理来访问请求的资源'; break
    		  case 400: err.message = '请求中有语法问题,或不能满足请求'; break
    		  case 402: err.message = '所使用的模块需要付费使用'; break
    		  case 403: err.message = '当前操作没有权限'; break
    		  case 404: err.message = '服务器找不到给定的资源'; break
    		  case 407: err.message = '客户机首先必须使用代理认证自身'; break
    		  case 415: err.message = '请求类型不支持,服务器拒绝服务'; break
    		  case 417: err.message = '未绑定登录账号,请使用密码登录后绑定'; break
    		  case 426: err.message = '用户名不存在或密码错误'; break
    		  case 429: err.message = '请求过于频繁'; break
    		  case 500: err.message = '服务器内部错误,无法完成请求'; break
    		  case 501: err.message = '服务不支持请求'; break
    		  case 502: err.message = '网络错误,服务器接收到上上游服务器无效响应'; break
    		  case 503: err.message = '服务器无法处理请求'; break
    		  case 504: err.message = '网络请求超时'; break
    		  case 999: err.message = '系统未知错误,请反馈给管理员'; break
    		}
    	} else {
    		err.message = '连接服务器失败!'
    	}
    	console.log(err.message)
    	return Promise.reject(err);
    });
    
    
    export default uniRequest
    
    main.js 引用
    import Vue from 'vue'
    import App from './App'
    import store from './store'
    import http from './utils/request'
    
    Vue.config.productionTip = false
    // 挂载全局
    Vue.prototype.$http = http
    
    App.mpType = 'app'
    
    const app = new Vue({
        ...App,
    	store
    })
    app.$mount()
    
    
    使用
    this.$http.post('/user', {
    	loginname: this.loginname,
    	possword: this.possword
    }).then((res) => {
    	console.log(res);
    }).catch((err) => {
    	console.log(err);
    });
    
    备注

    /**

    • 提供的方法有
    • uniRequest.request(config)
    • uniRequest.get(url[, config])
    • uniRequest.delete(url[, config])
    • uniRequest.head(url[, config])
    • uniRequest.options(url[, config])
    • uniRequest.post(url[, data[, config]])
    • uniRequest.put(url[, data[, config]])
    • uniRequest.patch(url[, data[, config]])

    */

    展开全文
  • uniapp中路由拦截方法

    2021-10-08 14:37:01
    uniapp中路由拦截方法是uni.addInterceptor()这个upi完成的。 uni.addInterceptor(STRING, OBJECT) 添加拦截器 STRING 参数说明 需要拦截的api名称,如:uni.addInterceptor('request', OBJECT) ,将拦截 uni....
  • uni-router-interceptor 是一个基于uni-app框架的纯路由拦截插件 由于自己的项目需要一个类似 vue-router 的路由拦截功能,本人考察了 uni 插件市场的大部分这一类的插件,发现 很多插件都配置特别繁琐,并且编译成...
  • 根据需求简易封装一个拦截
  • uniapp H5 登录拦截-----uni-simple-router

    千次阅读 2020-05-19 09:42:14
    因为项目用uniapp开发微信公众号,需要做登录拦截,开始是写在App.vue文件中,但是从微信公众号的菜单进入项目tabBar页面时,进入页面的生命周期将失效。onShow只会执行一次,其他生命周期函数失效。导致原因可能是...
  • axios npm 下载 axios ... import axios from 'axios'; import qs from 'qs';...//添加请求拦截器 axios.interceptors.request.use((config) => { //在发送请求之前做某件事 //... return config; },(error) =
  • resolve : reject, { success: statusCode.includes(res.statusCode), ...res, }, method, url, data, reject, resIntercept) // 执行响应拦截器 }, fail: async res => { ...
  • uniapp 封装好的request.js文件(包含响应拦截功能) import Vue from 'vue' import Request from './core/Request' import { isObject } from './utils.js' import {doLoginFromCache} from '@/static/api/login....
  •  } // 响应拦截,判断状态码是否通过 Vue.prototype.$u.http.interceptor.response = (res) => { // 如果把originalData设置为了true,这里得到将会是服务器返回的所有的原始数据 // 判断可能变成了res.statueCode...
  • 在小程序的开发中,经常会遇到登录过期让用户重新登录、请求header增加token、请求失败提示失败信息…等等,请求过多的时候,就会多了很多冗余重复的代码,所以必要时候我们需要做请求拦截和响应拦截。 (一)新建...
  • uni requset 请求全面配置(token,全局拦截)详解

    千次阅读 热门讨论 2019-08-29 11:59:01
    uni requset 请求配置详解 ...interface.js 请求拦截管理 config.js 请求配置 index.js import https from '../../interface' /** * 将所有接口统一起来便于维护 * 如果项目很大可以将 url 独...
  • } export default { install } 页面名称 http.api.js //main.js // 请求拦截器 + 响应拦截器 import httpInterceptor from '@/common/http.interceptor.js' Vue.use(httpInterceptor, app) // api接口 import ...
  • 想要在使用uniCloud的使用拦截请求怎么办 再次封装uniCloud.callFunction 正常情况下 我们使用uniCloud.callFunction uniCloud.callFunction({ name: 'xxx' }) 结合uni-id后请求时需要携带token 或者需要携带...
  • hbuild uniapp mock

    2020-11-24 17:51:33
    小程序 app 不支持mockjs拦截 h5 可以 本文通过匹配url 返回json数据 json可以mock uni.request promise插件https://ext.dcloud.net.cn/plugin?id=289 建目录mock 对url 进行匹配,调用相应的方法返回json数据,...
  • 1. 由于本人要写一个移动端的小项目就相当到使用uni 来编写 但是开发过程中 需要请求接口的时候 发现 市场都没有好的一个封装接口 demo 于是把自己 在vue 中封装axios 的方法放到了uni 的插件市场 ,等我有空会更新...
  • unirequest拦截

    千次阅读 2020-06-07 17:16:52
    import uniRequest from 'uni... console.log('请求拦截',req) return req }, err=>{ console.log('请求拦截报错',err) return err } ) uniRequest.interceptors.response.use(res=>{ console.log('响
  • 添加响应拦截器—无限刷新令牌,无痛刷新,令牌刷新 根据返回的状态码来做相对应的事情–10001 10006这个两个状态码需要做令牌刷新的功能 1.获取到登录的账户和密码 2.重新登录 3.把重新登录之后的token重新赋值给...
  • 最近使用uniapp写小程序,但是没有合适的数据请求,于是自己熬夜写了一个。 下面是对于代码的解释: 请求的初步封装 export default class request { // 配置项 constructor(options) { //请求公共地址 this....
  • * 基于 Promise 对象实现更简单的 request 使用方式,支持请求和响应拦截 */ export default { config: { baseUrl: "https:", header: { 'Content-Type':'application/json;charset=UTF-8', 'C...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 268
精华内容 107
关键字:

uniapp响应拦截