如何获取url中的数据
以下是一个示例:
假设我们需要编辑一个可点击的图片超链接,其结构如下:
```html
```
解析:在`navigator`标签中,我们使用`for`遍历JavaScript文件中存储的数组`cateList`,并指定键(这里的键必须是数据中不重复的)。接着,在`image`标签上绑定遍历出来的图片。
现在,我们来补充一个知识点——Promise。Promise是一个对象,与函数的区别在于,对象可以保存状态,而函数不能(除非闭包)。它并没有剥夺函数return的能力,因此无需逐层传递callback进行回调获取数据。Promise的代码风格简洁易懂,便于维护,同时多个异步等待合并也方便解决。
下面是一个使用Promise的例子:
```javascript
new Promise((resolve, reject) => {
// 一段耗时的异步操作
resolve('成功'); // 数据处理完成
// reject('失败'); // 数据处理出错
}).then(
(res) => {
console.log(res); // 成功时执行的回调函数
},
(err) => {
console.log(err); // 失败时执行的回调函数
}
);
```
其中,`resolve`的作用是将Promise对象的状态从“未完成”变为“成功”(即从pending变为resolved),在异步操作成功时调用,并将异步操作的结果作为参数传递出去。
reject的作用是将Promise对象的状态从“未完成”变为“失败”(即从pending变为rejected),在异步操作失败时调用,并将异步操作报出的错误作为参数传递出去。Promise对象有三个状态:pending(待定)初始状态、fulfilled(实现)操作成功和rejected(被否决)操作失败。当Promise状态发生改变时,就会触发then()里的响应函数处理后续步骤;Promise状态一经改变,就不会再变了。Promise对象的状态改变只有两种可能:从pending变为fulfilled或从pending变为rejected。
补充完这些知识点后,我们可以编辑一个用于请求的index.js文件(/request/index.js):
```javascript
export const request = (params) => {
return new Promise((resolve, reject) => {
wx.request({
...params,
// 成功的回调函数
success: (result) => {
resolve(result);
},
// 失败的回调函数
fail: (err) => {
reject(err);
}
});
});
};
```
在我们对应的页面下的index.js中,我们需要做以下几个步骤:
1. 创建一个接收数据的空数组:`cateList: []`;
2. 创建一个获取导航数组的方法`getCateList()`;
3. 在生命周期函数`onLoad`中调用该方法。
具体操作如下:
Page({
data: {
cateList: []
},
onLoad: function (options) {
this.getCateList();
},
getCateList() {
request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'
})
.then(result => {
this.setData({
cateList: result.data.message
});
});
}
});