uniapp网络请求封装；小程序请求接口封装；uni.request接口封装

淩亂°似流年 2021-09-07 06:19 1559阅读 0赞

[另一篇全面封装文章][Link 1]

[资源文章下载地址][Link 2]

**1.正常使用uni.request()发送请求(未封装)**

get() { 
          uni.request({ 
            url: 'http://192.168.1.191/abc//main/jiekouming/abclist?workType=2',
            data: { },
            header: { 
              Token: 'b042b36fwq909qwe9iiidsai2323sd232dw3'
            },
            method: 'GET',
            success: (res) => { 
              if (res.statusCode !== 200) { 
                return uni.showToast({ 
                  title: '获取数据失败',
                  icon: "none",
                  mask: true,
                })
              }
              console.log(res);
              this.arrType = res.data.data
            },
            fail: (error) => { 
              uni.showToast({ 
                title: '请求接口失败',
              })
              console.log(error);
            }
          })
        },

但是一个项目内多次请求，太过麻烦，所以我们需要封装uni.request()

**2.封装接口（在aop文件夹下席间index.js）** ，下方的封装api可直接复制，修改接口状态码即可使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70]

封装api：

// switch (process.env.NODE_ENV) { 
      // case 'development':
      // // 公共的地址开发
      // baseUrl = 'http://192.168.1.191/abc/'
      // break
      // case 'test':
      // baseUrl = 'https://test.epen.ltd/'
      // break
      // case 'production':
      // baseUrl = 'https://production.epen.ltd/'
      // break
      // default:
      // baseUrl = 'https://default.epen.ltd/'
      // }
      // console.log('baseUrl', baseUrl)
    // 公共地址
    
    // 接口共用地址
    const BASE_URL = 'http://192.168.1.191/abc/'
    // 获取储存的token 设置token请求头
    const token = uni.getStorageSync('token_key_name')
    
    export const myRequest = (options) => { 
        // 调接口加载
        uni.showLoading({ 
            title: "加载中",
            mask: true,
        });
        return new Promise((resolve, reject) => { 
            uni.request({ 
                url: BASE_URL + options.url,
                //默认参数
                data: options.data || { },
                // 配置请求头参数-例如token
                header: { 
                    Token: 'b042b36fwq909qwe9iiidsai2323sd232dw3'
                    // Accept: 'application/json',
                    // 'Content-Type': 'application/json',
                    // 'X-Requested-With': 'XMLHttpRequest'
                },
                method: options.method || 'GET',
                // sslVerify: true,
    
                // 接口请求成功
                success: (res) => { 
                    // 关闭加载
                    uni.hideLoading();
                    console.log('接口所有参数', res);
                    if (res.statusCode !== 200) { 
                        // 不同报错信息的提示和配置
                        if (res.statusCode == 500) { 
                            return uni.showToast({ 
                                title: '服务器重启中...',
                                icon: "none",
                                mask: true,
                            })
                        } else { 
                            return uni.showToast({ 
                                title: '获取数据失败',
                                icon: "none",
                                mask: true,
                            })
                        }
                    }
                    // 调用成功且有数据 返回数据 组件内通过 .then() 或者async await 接受异步返回数据
                    //resolve(res.data)
                    //在接口200 调用成功后 才能进行判断接口内的状态码 return_code 以此判定作何操作和提示
    		        const {  statusCode, data } = res
    		        let return_code = res.data.return_code
    		        let return_message = res.data.return_message
    		        switch (return_code) { 
    		          case '0':
    		            // 成功的数据data状态码 则直接返回数据
    		            resolve(res.data)
    		            break
    		          case '4011':
    		            uni.clearStorage()
    		            if (hasUserInfo && !isExisited && !checkToken) { 
    		              isExisited = true
    		              uni.showModal({ 
    		                title: '提示',
    		                content: '身份失效，请重新登录！',
    		                complete: () => { 
    		                  uni.reLaunch({  url: '/pages/index/index' })
    		                },
    		              })
    		            } else { 
    		              reject(res.data)
    		            }
    		            break
    		          default:
    		            // 其他的如无特定要求 则做提示
    		            // reject(res.data)
    		            return uni.showToast({ 
    		              title: return_message || '请求失败',
    		              duration: 2000,
    		              icon: 'none',
    		            })
    		        }
                },
    
                // 接口接口失败
                fail: (error) => { 
                    // 关闭加载
                    uni.hideLoading();
                    console.log(2, error);
                    uni.showToast({ 
                        title: '请求接口失败',
                        icon: "none",
                        mask: true,
                    })
                    // 失败数据
                    reject(error)
                }
            })
        })
    }

**3.引入挂载，在入口文件main.js引入，挂在到全局使用**：

// 引入封装的接口api
    import {  myRequest } from './pages/api/index.js'
    // 挂在Vue属性 全局通过this.$myRequest()可以访问到
    Vue.prototype.$myRequest = myRequest

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 1]

**4.使用：直接在组件内，在方法内通过this.$myRequest()即可：  
注意：有两种获取参数方式：  
①通过 async await 拿到异步数据  
②通过 .then()拿到异步数据**

async await：

async getType() { 
          const res = await this.$myRequest({ 
            url: 'aaa/bbb/list?workType=2',
          })
          console.log('使用async await获取返回的参数', res);
          this.arrType = res.data
        },

.then()：

postType() { 
          // const res = this.$myRequest({ 
          // url:'question/abc/jiekouming',
          // method:'POST',
          // data:{ 
          // chapterIds:[22394],
          // knowledgeIds:[13269, 13271, 14118]
          // }
          // })
          // console.log('直接获取拿不到异步结果',res);
          this.$myRequest({ 
            url: 'question/abc/jiekouming',
            method: 'POST',
            data: { 
              chapterIds: [22394],
              knowledgeIds: [13269, 13271, 14118]
            }
          }).then(res => { 
            console.log('使用.then()获取返回的参数', res);
            this.qType = res.data
          })
        },

5.请求结果模拟：  
①请求成功：  
![在这里插入图片描述][20210318150521908.gif]

②获取失败：  
![在这里插入图片描述][20210318150521927.gif]  
接口访问成功200 数据状态码是错误的提示  
![在这里插入图片描述][20210521133753946.gif_pic_center]

③结果请求失败：  
![在这里插入图片描述][20210318150521900.gif]

④服务器500：  
![在这里插入图片描述][20210318151258561.gif]

[Link 1]: https://blog.csdn.net/i_am_a_div/article/details/117118737
[Link 2]: https://download.csdn.net/download/i_am_a_div/18934470?spm=1001.2014.3001.5503
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70]: /images/20210724/810be9998c39418eb2d4de4f822d3479.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 1]: /images/20210724/fb334a15eacc48ea952792cfe53b3818.png
[20210318150521908.gif]: /images/20210724/663ea7a9226d470784389e0e2b091d20.png
[20210318150521927.gif]: /images/20210724/28d51c75b0594980afe0dd72f1a5b71c.png
[20210521133753946.gif_pic_center]: /images/20210724/616e845155654fa3b55b08f31cec40a7.png
[20210318150521900.gif]: /images/20210724/55e02e76975f47b395851a82a146790e.png
[20210318151258561.gif]: /images/20210724/56f10b33f1d3437b8358eb6fe4ddfe73.png