uniapp官方的请求方式
首先我们先看一下uni官方给开发者提供的uni.request用来网络请求的api
1uni.request({ 2 url: '', 3 method: 'GET', 4 data: {}, 5 header:{}, 6 success: res => {}, 7 fail: () => {}, 8 complete: () => {} 9});
可以看到我们每次请求数据的时候都需要按照这个格式来请求,这样会使代码冗余并且难以维护,所以就需要将uni.request进行二次封装
uni.request 三种请求方式
1// 默认方式 2uni.request({ 3 url: 'https://www.example.com/request', 4 success: (res) => { 5 console.log(res.data); 6 } 7}); 8 9// Promise 10uni.request({ 11 url: 'https://www.example.com/request' 12 }) 13 .then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据 14 var [error, res] = data; 15 console.log(res.data); 16 }) 17 18// Await 19async function request () { 20 var [error, res] = await uni.request({ 21 url: 'https://www.example.com/request' 22 }); 23 console.log(res.data); 24}
封装响应拦截器
1. 新建一个request.js文件
1export default { 2 config:{ 3 baseURL: '', 4 // 响应拦截器 5 beforeRequest() {}, 6 // 请求拦截器 7 handleResponse() {} 8 }, 9 // request 请求 10 request(){} 11}
2. 在响应拦截器中封装公共方法
我们先在request中调用 beforeRequest
1// common/request.js 2export default { 3 config:{ 4 baseURL: baseURL, 5 // 响应拦截器 6 beforeRequest() { 7 return new Promise((resolve, reject) => { 8 console.log('响应拦截器') 9 resolve('123456') 10 }) 11 }, 12 // 请求拦截器 13 handleResponse() {} 14 }, 15 // request 请求 16 request(){ 17 return this.config.beforeRequest().then(opt => { 18 console.log(opt) 19 }) 20 } 21}
1// pages/index/index.vue 2<script> 3 import api from '@/common/request.js' 4 export default { 5 data() { 6 return { 7 8 } 9 }, 10 onLoad() { 11 this.getData() 12 }, 13 methods: { 14 getData() { 15 api.request() 16 } 17 } 18 } 19</script>
在浏览器的控制台中查看打印的内容
可以看到成功打印出来,然后就可以将公共的的方法封装在响应拦截器中
1// 可以从外部引入baseURL,也可以定义到config下的baseURL中 2import baseURL from '@/common/baseURL.js' 3export default { 4 config:{ 5 baseURL: baseURL, 6 // 处理token的方法 7 getToken() { 8 let token = uni.getStorageSync('token'); 9 if(!token) { 10 return uni.reLaunch({ 11 url: '/pages/login/login' 12 }) 13 } 14 return token 15 }, 16 // 响应拦截器 17 beforeRequest(options = {}) { 18 return new Promise((resolve, reject) => { 19 options.url = this.baseURL + options.url; 20 options.method = options.method || 'GET'; 21 // options.responseType = 'arraybuffer' 22 // 封装自己的请求头 23 options.header = { 24 token: this.getToken() 25 } 26 resolve(options) 27 }) 28 }, 29 // 请求拦截器 30 handleResponse() {} 31 }, 32 // request 请求 33 request(options = {}){ 34 return this.config.beforeRequest(options).then(opt => { 35 // 返回 uni.request 36 return uni.request(opt) 37 }) 38 } 39}
1// pages/index/index.vue 2methods: { 3 getData() { 4 api.request({url: '/fish/tag/list'}).then(data => { 5 console.log(data) 6 }) 7 } 8}
查看打印结果
封装请求拦截
1// 可以从外部引入baseURL,也可以定义到config下的baseURL中 2import baseURL from '@/common/baseURL.js' 3export default { 4 config:{ 5 baseURL: baseURL, 6 // 处理token的方法 7 getToken() { 8 let token = uni.getStorageSync('token'); 9 if(!token) { 10 return uni.reLaunch({ 11 url: '/pages/login/login' 12 }) 13 } 14 return token 15 }, 16 // 响应拦截器 17 beforeRequest(options = {}) { 18 return new Promise((resolve, reject) => { 19 options.url = this.baseURL + options.url; 20 options.method = options.method || 'GET'; 21 // 封装自己的请求头 22 options.header = { 23 token: this.getToken() 24 } 25 resolve(options) 26 }) 27 }, 28 // 请求拦截器 29 handleResponse(data) { 30 return new Promise((resolve, reject) => { 31 const [err, res] = data; 32 // 处理错误 33 if(res && res.statusCode !== 200) { 34 let msg = res.data.msg || '请求错误'; 35 uni.showToast({ 36 icon: 'none', 37 title: msg 38 }) 39 return reject(msg); 40 } 41 if(err) { 42 uni.showToast({ 43 icon: 'none', 44 title: '请求错误' 45 }) 46 return reject(err); 47 } 48 return resolve(res.data) 49 }) 50 } 51 }, 52 // request 请求 53 request(options = {}){ 54 return this.config.beforeRequest(options).then(opt => { 55 // 这里看不懂的可以看上面 uni.request 三种请求方式的第二种 56 return uni.request(opt) 57 }).then(res => this.config.handleResponse(res)) 58 } 59}
1// pages/index/index.vue 2methods: { 3 getData() { 4 api.request({url: '/fish/tag/list'}).then(data => { 5 console.log(data) 6 }) 7 }, 8 // async 9 async getData() { 10 let data = await api.request({url: '/fish/tag/list'}) 11 console.log(data) 12 } 13} 14 15 16
