常州哪里做网站,重庆响应式网站设计,百度公司有哪些部门,网站开发与制作论文开题首先我们先看一下uni官方给开发者提供的uni.request用来网络请求的api 1 2 3 4 5 6 7 8 9 uni.request({ url: , method: GET, data: {}, header: {}, success: res {}, fail: () {}, complete: () {} });
可以看到我们每次请求数据的时候都需…首先我们先看一下uni官方给开发者提供的uni.request用来网络请求的api 1 2 3 4 5 6 7 8 9 uni.request({ url: , method: GET, data: {}, header: {}, success: res {}, fail: () {}, complete: () {} });
可以看到我们每次请求数据的时候都需要按照这个格式来请求,这样会使代码冗余并且难以维护,所以就需要将uni.request进行二次封装
uni.request 三种请求方式
uni.request 请求方式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // 默认方式 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文件 1 2 3 4 5 6 7 8 9 10 11 export default { config: { baseURL: , // 响应拦截器 beforeRequest() {}, // 请求拦截器 handleResponse() {} }, // request 请求 request() {} }
2. 在响应拦截器中封装公共方法
我们先在request中调用 beforeRequest 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // 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) }) } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // pages/index/index.vue import api from /common/request.js export default { data() { return {} }, onLoad() { this.getData() }, methods: { getData() { api.request() } } }
在浏览器的控制台中查看打印的内容 可以看到成功打印出来,然后就可以将公共的的方法封装在响应拦截器中 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 // 可以从外部引入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) }) } } 1 2 3 4 5 6 7 8 9 10 // pages/index/index.vue methods: { getData() { api.request({ url: /fish/tag/list }).then(data { console.log(data) }) } }
查看打印结果 封装请求拦截 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 // 可以从外部引入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)) } } 智能机器人
除注明外的文章,均为来源:老汤博客,转载请保留本文地址 原文地址uniapp封装请求拦截器(封装请求拦截和响应拦截的方法)-老汤博客
