如何获取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

});

});

}

});