网络请求封装 | 任先生的笔记库

# 一、网络请求

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

提示

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

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

# 1、wx.request

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

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

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

# 2、wx.p.request

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

安装：

npm i miniprogram-api-promise
 
        Copied!

配置：

app.js

import { promisifyAll } from 'miniprogram-api-promise'

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

APP({})
 
        Copied!

使用：

页面.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
    })
  }
})
 
        Copied!

# 二、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)
      }
    })
  })
}
 
        Copied!

使用

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 })
  }
})
 
        Copied!

# 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()
 
        Copied!

使用

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 })
  }
})
 
        Copied!

← 小程序API 【登录流程】 →