使用promise封装原生的微信小程序ajax请求

这里需要注意的一点是:在进行数据请求的时候,一定要在微信开发者工具详情里面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HCjBuTUy-1593522567511)(C:\Users\l\AppData\Roaming\Typora\typora-user-images\image-20200630205906404.png)]

这里面一定要勾选上,不然会报错,数据请求不到

原生自己封装

/** * 使用promise封装原生的微信小程序ajax请求 * @param {string} url 请求路径 * @param {object} params 请求参数 * @param {string} methods 请求类型 * @param {object} header 请求头 */ const app = getApp() const hosturl = app.globalData.host module.exports = (url, params = {}, methods = "GET", header = {}) => { return new Promise((resolve, reject) => { wx.request({ url:hostrul+url //仅为示例，并非真实的接口地址 methods, data: params, success: resolve, fail: reject }) }) }

使用:

const fetch = require("../../utils/fetch")

网上封装的比较好的原生微信小程序ajax请求

const app = getApp() const request = (url, options) => { return new Promise((resolve, reject) => { wx.request({ url: `${app.globalData.host}${url}`, method: options.method, data: options.method === 'GET' ? options.data : JSON.stringify(options.data), header: { 'Content-Type': 'application/json; charset=UTF-8', 'x-token': 'x-token' // 看自己是否需要 }, success(request) { if (request.data.code === 2000) { resolve(request.data) } else { reject(request.data) } }, fail(error) { reject(error.data) } }) }) } const get = (url, options = {}) => { return request(url, { method: 'GET', data: options }) } const post = (url, options) => { return request(url, { method: 'POST', data: options }) } const put = (url, options) => { return request(url, { method: 'PUT', data: options }) } // 不能声明DELETE（关键字） const remove = (url, options) => { return request(url, { method: 'DELETE', data: options }) } module.exports = { get, post, put, remove }

封装flyio

步骤:

1.下载:(一开始一定要初始化一下,让项目变成一个node项目)

npm init -y npm i flyio -S (下载flyio的包)

2.下载下来之后,把包单独拎出来,不要放在nodemodel里面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KoTVDnCp-1593522567515)(C:\Users\l\AppData\Roaming\Typora\typora-user-images\image-20200630203813241.png)]

3.封装:

// 1. 引入flyio import Fly from './flyio/dist/npm/wx' // 2. 实例化 const fly = new Fly() const host = getApp().globalData.host // 添加请求拦截器 fly.interceptors.request.use( (request) => { wx.showLoading({ title: '加载中', mask: true }) // console.log(request) // request.headers["X-Tag"] = "flyio"; // request.headers['content-type']= 'application/json'; request.headers = { 'X-Tag': 'flyio', 'content-type': 'application/json' } let authParams = { // 公共参数 'categoryType': 'SaleGoodsType@sim', 'streamNo': 'wxapp153570682909641893', 'reqSource': 'MALL_H5', 'appid': 'string', 'timestamp': new Date().getTime(), 'sign': 'string' } request.body && Object.keys(request.body).forEach((val) => { if (request.body[val] === '') { delete request.body[val] }; }) request.body = { ...request.body, ...authParams } return request }) // 添加响应拦截器 fly.interceptors.response.use((response) => { wx.hideLoading() return response.data// 请求成功之后将返回值返回 }, (err) => { // 请求出错，根据返回状态码判断出错原因 console.log(err) wx.hideLoading() if (err) { return '请求失败' }; } ) // 3. 配置根路径 fly.config.baseURL = host export default fly

4.使用

import api from "../../api/index" //引入 async getSlides() { //进行数据请求 const res = await api.get("/slides") this.setData({ slides: res }) },