微信小程序——request封装/promise,async封装request

比眉伴天荒 2023-02-22 08:23 67阅读 0赞

## 一，request封装  ##

1，在根目录utils下创建一个index.js文件,用来写封装的request

![20200702171648670.png][]

2,创建config/index.js来放我们的基础路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

3，utils/index.js

import {BASEURL} from '../config/index';//引入基础路径
    export function $get(url,success){
    $request(url,'GET',success)
    }
    export function $post(url,success){
      $request(url,'POST',success)
      }
      function $request(url,methods,success){
       wx.showLoading({
         title: '加载中...',
       })
       wx.request({
         methods,
         url: BASEURL+url,
         success:res=>{
          success(res.data);
         },
         complete(){
           wx.hideLoading({
             success: (res) => {},
           })
         }
       })
      }

4，页面调用：

import{$get} from '../../utils/index';
    
    Page({
    /**
       * 页面的初始数据
       */
      data: {
        menulist:[]
      },
    
     /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
       $get('/menulist',({menulist})=>{
         this.setData({
          menulist
         })
       })
      },
    })

## 二，promise,async封装request ##

用promise,async封装request，可以使用更加方便，优化请求

utils/index.js

import {
      BASEURL
    } from '../config/index';
    export function $get(url) {
    return  $request(url, 'GET')
    }
    export function $post(url) {
     return $request(url, 'POST')
    }
    
    function $request(url, methods) {
      wx.showLoading({
        title: '加载中...',
      })
      return new Promise((resolve,reject)=>{
        wx.request({
          methods,
          url: BASEURL + url,
          success: res => {
            resolve(res.data);
          },
          fail(e){
            reject(e);
          },
          complete() {
            wx.hideLoading({
              // success: (res) => {},
            })
          }
        })
      }) 
    }

页面调用：

import{$get} from '../../utils/index';
    
    Page({
    /**
       * 页面的初始数据
       */
      data: {
        menulist:[]
      },
    
     /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.getMenulist();
       
      },
       async getMenulist(){
         let {menulist}=await $get('/menulist')
         
          this.setData({
            menulist
          })
       },
    })

这样写也是可以的：

/**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
     
        let pro=$get('/menulist')
        console.log(pro)
        pro.then(({menulist})=>{
          this.setData({
            menulist
          })
        })
      },

其中出现一个问题，不过只要把下面增强编译勾上就可以了 ，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2][]

[20200702171648670.png]: https://img-blog.csdnimg.cn/20200702171648670.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200702172128925.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200702183259745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200702183202977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70