# 一、网络请求

  小程序的宿主环境不是浏览器,是微信客户端。所以小程序是不存在跨域问题的。

提示

  Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 对象。

  所以小程序中的数据请求是不能叫做“Ajax 请求”的,应该叫做“网络数据请求”。

# 1、wx.request

  默认情况下,小程序官方提供的异步 API 都是基于回调函数实现的。

wx.request({
  method: '',
  url: '',
  data: {},
  success: () => {}, // 请求成功的回调函数
  fail: () => {}, // 请求失败的回调函数
  complete: () => {} // 请求完成的回调函数
})

  但是我们知道,这种回调的方式容易造成回调地狱问题,代码的可读性、维护性差!

# 2、wx.p.request

  小程序中的wx.request无法使用 promise,但我们可以通过使用第三方包解决问题。

安装:

npm i miniprogram-api-promise

配置:

  • app.js
import { promisifyAll } from 'miniprogram-api-promise'

const wxp = (wx.p = {})
// promisify all wx's api
promisifyAll(wx, wxp)

APP({})

使用:

  • 页面.js 文件
Page({
  data: {
    articleList: []
  },

  onLoad: function (options) {
    this.getArtclList()
  },

  async getArtclList() {
    const { data: res } = await wx.p.request({
      url: 'http://www.note-book.cn/api/post',
      method: 'POST',
      data: {
        name: '中国',
        numb: '22'
      }
    })

    // console.log(res)
    this.setData({
      articleList: res
    })
  }
})

# 二、wx.request 封装

  如果我们既不想要直接使用小程序的wx.request,但又想要让其有 Promise 功能;此时我们可以自己对原wx.request进行自定义封装

# 1、封装成函数

  • service / require.js
// 封装成函数
export function renRequest(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}
  • 使用
import { renRequest } from '../../service/require.js'

Page({
  data: {
    dateList: []
  },
  onLoad() {
    // 使用1
    renRequest({ url: 'xxxx' }).then((res) => {
      this.setData({ dataList: res.data })
    })

    // 使用2 👀
    this.getDataList()
  },

  async getDataList() {
    const { data: res } = await renRequest({ url: 'xxxx' })
    this.setData({ dataList: res })
  }
})

# 2、封装成类 🎈

  • service / require.js
// 封装成类
class RenRequest {
  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.data)
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  }
  get(options) {
    return this.request({ ...options, method: 'get' })
  }
  post(options) {
    return this.request({ ...options, method: 'post' })
  }
}
export const renReq = new RenRequest('https://jsonplaceholder.typicode.com/')

// renReq.request()
// renReq.get()
// renReq.post()
  • 使用
import { renReq } from '../../service/require.js'

Page({
  data: {
    dateList: []
  },
  onLoad() {
    this.getDataList()
  },

  async getDataList() {
    const { data: res } = await renReq.get({ url: '/posts/1' })
    this.setData({ dataList: res })
  }
})
更新于 : 7/8/2024, 10:21:14 AM