# 一、网络请求
小程序的宿主环境不是浏览器,是微信客户端。所以小程序是不存在跨域问题的。
提示
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!