使用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
})
},