uni-app发送请求封装

我们自己写项目时候可以不需要封装。封装其实也是对自己的一种提高吧。哈哈哈哈。
1、封装成一个方法后，以后想要发送请求就直接调用这个方法，这样所有的请求都走这个方法，就可以对所有的请求做一个拦截，

2、另外，接口的域名不管要使用多少次都是一样的，难以维护，提高代码的可复用性

const BASE_URL = 'http://localhost:8082'
// 通过export向外暴露一个方法，方法名叫myRequest,调用myRequest方法时会向方法中传递一个对象options
export const myRequest = (options)=>{  
    return new Promise((resolve,reject)=>{  // 异步处理的封装通过promise比较好，并且要return出去，
        uni.request({  // 在回调函数中处理异步请求
            url: BASE_URL + options.url,  // 将接口地址分为两部分，这样如果域名改变了好维护，接口地址从options中获取
            method: options.method || 'GET', // 方法从options中获取，如果没有传入method，则默认为GET，
            data: options.data || {},  // data从options中获取，如果没有传入data， 则默认一个空对象
            success: (res) => {  // 用箭头函数，res是返回来的数据
                if(res.data.status !== 0){  // 如果请求失败，则给一个提示
                    return uni.showToast({
                        title: '获取数据失败！'
                    })
                }
                resolve(res)  //如果请求成功，调用resolve返回数据
            },
            fail: (err)=>{ // err 是返回来的错误信息
                uni.showToast({  // 给一个消息提示
                    title: '请求接口失败！'
                })
                reject(err) // 调用reject方法把错误消息返回出去
            }
            
        })
    })
}
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

这个方法可能每个页面都会用到，我们可以在main.js中引入，

import { myRequest } from ‘./util/api.js’
接收之后，挂载到全局，这样所有的页面都可以调用这个方法

Vue.prototype.$myRequest = myRequest
1

使用方法：使用this.$myRequest进行调用

onLoad() {
            this.getSwipers()
        },
        methods: {
            // 获取轮播图数据
            async getSwipers(){
                // uni.request({
                //     url: 'http://localhost:8082/api/getlunbo',
                //     method: 'get',
                //     success:(res)=>{
                //         console.log(res)
                //         if(res.data.status !== 0){
                //             return uni.showToast({
                //                 title: '获取数据失败！'
                //             })
                //         }
                //         this.swipers = res.data.message
                //         
                //     }
                // })
                const res = await this.$myRequest({url: '/api/getlunbo'})
                console.log(res)
                this.swipers = res.data.message
            }
            
        }
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