uniapp封装请求拦截器(封装请求拦截和响应拦截的方法)
首先我们先看一下uni官方给开发者提供的uni.request用来网络请求的api
uni.request({ url: '', method: 'GET', data: {}, header: {}, success: res => {}, fail: () => {}, complete: () => {} });
可以看到我们每次请求数据的时候都需要按照这个格式来请求,这样会使代码冗余并且难以维护,所以就需要将uni.request进行二次封装
uni.request 三种请求方式
uni.request 请求方式
// 默认方式 uni.request({ url: 'https://www.example.com/request', success: (res) => { console.log(res.data); } }); // Promise uni.request({ url: 'https://www.example.com/request' }) .then(data => { //data为一个数组,数组第一项为错误信息,第二项为返回数据 var [error, res] = data; console.log(res.data); }) // Awaitasync function request() { var [error, res] = await uni.request({ url: 'https://www.example.com/request' }); console.log(res.data); }
封装响应拦截器
1. 新建一个request.js文件
export default { config: { baseURL: '', // 响应拦截器 beforeRequest() {}, // 请求拦截器 handleResponse() {} }, // request 请求 request() {} }
2. 在响应拦截器中封装公共方法
我们先在request中调用 beforeRequest
// common/request.jsexport default { config: { baseURL: baseURL, // 响应拦截器 beforeRequest() { return new Promise((resolve, reject) => { console.log('响应拦截器') resolve('123456') }) }, // 请求拦截器 handleResponse() {} }, // request 请求 request() { return this.config.beforeRequest().then(opt => { console.log(opt) }) } }
// pages/index/index.vue import api from '@/common/request.js' export default { data() { return {} }, onLoad() { this.getData() }, methods: { getData() { api.request() } } }
在浏览器的控制台中查看打印的内容
可以看到成功打印出来,然后就可以将公共的的方法封装在响应拦截器中
// 可以从外部引入baseURL,也可以定义到config下的baseURL中 import baseURL from '@/common/baseURL.js' export default { config: { baseURL: baseURL, // 处理token的方法 getToken() { let token = uni.getStorageSync('token'); if (!token) { return uni.reLaunch({ url: '/pages/login/login' }) } return token }, // 响应拦截器 beforeRequest(options = {}) { return new Promise((resolve, reject) => { options.url = this.baseURL + options.url; options.method = options.method || 'GET'; // options.responseType = 'arraybuffer' // 封装自己的请求头 options.header = { token: this.getToken() } resolve(options) }) }, // 请求拦截器 handleResponse() {} }, // request 请求 request(options = {}) { return this.config.beforeRequest(options).then(opt => { // 返回 uni.request return uni.request(opt) }) } }
// pages/index/index.vue methods: { getData() { api.request({ url: '/fish/tag/list' }).then(data => { console.log(data) }) } }
查看打印结果
封装请求拦截
// 可以从外部引入baseURL,也可以定义到config下的baseURL中 import baseURL from '@/common/baseURL.js' export default { config: { baseURL: baseURL, // 处理token的方法 getToken() { let token = uni.getStorageSync('token'); if (!token) { return uni.reLaunch({ url: '/pages/login/login' }) } return token }, // 响应拦截器 beforeRequest(options = {}) { return new Promise((resolve, reject) => { options.url = this.baseURL + options.url; options.method = options.method || 'GET'; // 封装自己的请求头 options.header = { token: this.getToken() } resolve(options) }) }, // 请求拦截器 handleResponse(data) { return new Promise((resolve, reject) => { const [err, res] = data; // 处理错误 if (res && res.statusCode !== 200) { let msg = res.data.msg || '请求错误'; uni.showToast({ icon: 'none', title: msg }) return reject(msg); } if (err) { uni.showToast({ icon: 'none', title: '请求错误' }) return reject(err); } return resolve(res.data) }) } }, // request 请求 request(options = {}) { return this.config.beforeRequest(options).then(opt => { // 这里看不懂的可以看上面 uni.request 三种请求方式的第二种 return uni.request(opt) }).then(res => this.config.handleResponse(res)) } }
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.com/web/qdkf/669.html
原文地址:https://tangjiusheng.com/web/qdkf/669.html
大家都在看
- Unity是什么软件(超详细的Unity简介与使用方法)
- uni.showtoast不显示怎么解决(亲测有效的方法)
- uniapp checkbox 获取选中id,uniapp单选框代码
- uniapp上传文件到后端(分享uniapp上传file文件到服务器的方法)
- uniapp和原生开发区别(uni-app开发的优势和劣势)
- uniapp跳转页面传参数(路由跳转以及页面传参的方法)
- uniapp底部导航栏怎么设置(自定义底部导航栏样式)
- uniapp返回上一页并刷新怎么实现?
- uni.request前端封装请求接口(uni-app request网络封装的好处)
- uniapp和vue有什么区别(前端vue和uniapp哪个好用)