uniapp的封装请求

浅浅梦 / 2023-05-09 / 原文

1.新建目录utils

2.在目录utils中新建request.js

3.request.js封装内容，如下：

 1 /**
 2  * @param {Object} url请求地址
 3  * @param {Object} data 请求数据
 4  * @param {Object} contentType 请求内容类型 1=json  2=form
 5  * @param {Object} method请求方法
 6  */
 7 function request({url, data, method, contentType}){
 8     let header = {
 9         'content-type': contentType === 1 ? 'application/json' : 'application/x-www-form-urlencoded'
10     }
11     let baseUrl = "http://localhost:3000";
12     
13     return new Promise((resolve, reject)=>{
14         uni.request({
15             url:baseUrl+url,
16             data,
17             method,
18             header,
19             success: (res) => {
20                 if(res.statusCode === 200) {
21                     // 请求成功
22                     resolve(res.data);
23                 }else if(res.statusCode === 401){
24                     uni.showToast({
25                         icon:'none',
26                         title:"未登录或登录状态已超时",
27                         duration:1500
28                     });
29                 } else if (res.statusCode === 405){
30                     uni.showToast({
31                         icon:'none',
32                         title:"请求方法错误",
33                         duration:1500
34                     });
35                 }else {
36                     uni.showToast({
37                         icon:'none',
38                         title:"请求错误" + res.statusCode,
39                         duration:1500
40                     });
41                 }
42             },
43             fail: (err) => {
44                 console.log("err:",err)
45                 uni.showToast({
46                     icon:'none',
47                     title:err.errMsg,
48                     duration:1500
49                 });
50                 reject(err);
51             }
52         })
53     })
54 }
55 
56 export default {request}

View Code

4.新建目录apis

5.在目录apis中新建文件index.js,内容如下：

 1 import request from "@/utils/request.js"
 2 
 3 // 轮播请求接口
 4 export function apiGetBanner(data){
 5     return request.request({
 6         url:'/banner',
 7         method:'GET',
 8         data
 9     })
10 }

6.在页面中的使用

 1 引入模块
 2 import {apiGetBanner} from '@/apis/index.js'
 3 
 4 使用
 5 methods: {
 6             getBanner(){
 7                 apiGetBanner().then(res=>{
 8                     console.log(res)
 9                     this.swiper=res.banners
10                 })
11                 // uni.request({
12                 //     url:"http://localhost:3000/banner",
13                 //     method:'GET',
14                 //     success: (res) => {
15                 //         console.log(res)
16                 //         this.swiper=res.data.banners
17                 //     }
18                 // })
19             }
20         }