微信小程序-网络请求与封装

微信小程序-网络请求与封装

网络请求的基本写法

wx.request(Object object)

描述：发起 HTTPS 网络请求。

页面

index.js

// pages/07_learn_api/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    all:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    wx.request({
    //请求的url
      url:"https://mock.mengxuegu.com/mock/642836c232affa39a121c54b/xin/vue/list",
      //请求的参数
      data:{
        
      },
      //成功的回调
      success:(res)=>{
        console.log('res',res.data.data.list);
       //成功后把数据存放data中
        this.setData({all:res.data.data.list})
      },
      //失败的回调
      fail:(err)=>{
        console.log('err',err);
      }
    })
  },

})

index.wxml

<view >
<block wx:for="{{all}}"  wx:key="id">
 <view>
  {{item.id}}---{{index}}
 view>
block>
  
view>

网络请求封装

函数封装

创建service文件夹主要存放网络请求
index.js

// 封装成函数
export function hyRequest(options){
  return new Promise((resolve,reject)=>{
    wx.request({
     ...options,
     success:(res)=>{
       resolve(res)
     },
     fail:reject
    })
  })
}

页面

写法一：

// pages/07_learn_api/index.js
import { hyRequest } from "../../service/index";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    all:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    hyRequest({
      url:"https://mock.mengxuegu.com/mock/642836c232affa39a121c54b/xin/vue/list"
    }).then(res=>{
      this.setData({all:res.data.data.list})
    })
    
})
}

写法二swait / async

import { hyRequest } from "../../service/index";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    all:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad() {
    // 3.swait / async
    const list = await hyRequest({
      url:"https://mock.mengxuegu.com/mock/642836c232affa39a121c54b/xin/vue/list",
      data:{},  
    })
    console.log(list);
    this.setData({all:list.data.data.list})
  },
 
})

写法四 在生命周期里面进行调用

// pages/07_learn_api/index.js
import { hyRequest,yReqInstance } from "../../service/index";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    all:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
   onLoad() {
   
  this.getCityData()
   },
  // /vue/list
  async getCityData() {
    const list = await hyRequest({ 
      url: "https://mock.mengxuegu.com/mock/642836c232affa39a121c54b/xin/vue/list" 
    })
    console.log(list);
    this.setData({ all: list })
  },
  
})

使用类进行封装 （推荐）

// 封装成类
class hyRequest{
  constructor(baseURL){
    this.baseURL=baseURL
  }
  request(options){
    const {url} = options
    return new Promise((resolve,reject)=>{
      wx.request({
        ...options,
        url:this.baseURL+url,
        success:(res)=>{
          resolve(res)
        },
        fail:(err)=>{
          console.log('err',err);
        }
      })
    })
  }
  get(options){
    return this.request({...options, method:"get" })
  }
  post(options){
    return this.request({...options,method:"post"})
  }
}
export const yReqInstance =new hyRequest("https://mock.mengxuegu.com/mock/642836c232affa39a121c54b/xin")

页面调用

写法一

// pages/07_learn_api/index.js
import { hyRequest,yReqInstance } from "../../service/index";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    all:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad() {
    

  // 使用类进行封装
   yReqInstance.get({
     url:"/vue/list"
   }).then(res=>{
     console.log(res);
   })
   },  
})

在生命周期直接调用

// pages/07_learn_api/index.js
import { hyRequest,yReqInstance } from "../../service/index";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    all:{}
  },


  onLoad() {
  this.getCityData()
   },
  // /vue/list
  async getCityData() {
    const list = await yReqInstance.get({ 
      url: "/vue/list" 
    })
    console.log(list);
    this.setData({ all: list })
  },
  
})