React租房应用localStorage与async、await加载案例

发表于： 2022年5月2日 2022年5月2日
分类： Javascript

获取当前城市信息，我们将获取定位城市的代码封装到一个函数中，哪个页面需要获取定位城市，直接调用该方法即可

在utils目录中，创建一个文件，在这个文件中进行封装
创建并且导出获取定位城市的函数 getCurrentCity
判断localStorage中是否有定位信息
如果没有，我们通过获取定位信息来获取当前定位城市，获取完了需要存到本地存储中
如果有，直接使用就好

import axios from 'axios'
export const getCurrentCity = () => {
    // 获取本地存储中是否有
    let localCity = JSON.parse(localStorage.getItem('localCity'))
    if (!localCity) {
        // 如果没有，就需要获取当前定位城市
        // 利用 promis 来解决异步数据的返回
        return new Promise((resolve, reject) => {
            try {
                // 获取当前城市信息
                var myCity = new window.BMap.LocalCity();
                myCity.get(async res => {
                    // 当获取到对应的城市信息了后，我们需要请求我们自己的服务器
                    const { data: infoRes } = await axios.get('http://localhost:8080/area/info', {
                        params: {
                            name: res.name
                        }
                    })
                    if (infoRes.status != 200) {
                        console.error(infoRes.description)
                        return
                    }
                    console.log(infoRes);

                    // res.data.body
                    // 保存在本地存储中
                    localStorage.setItem('localCity', JSON.stringify(infoRes.body))
                        // 返回城市的数据
                    resolve(infoRes.body)
                });
            } catch (error) {
                // 进入到catch代码块 说明调用失败了
                reject(error)
            }
        })

    }
    // 如果有，我们直接返回城市信息就好,返回一个成功的promis对象即可
    return Promise.resolve(localCity)
}

将定位的城市信息添加到 cityList和cityIndex中

// 获取当前城市定位信息
let curCity = await getCurrentCity()
// 将当前城市数据添加到 cityList
cityList['#'] = curCity
// 将当前城市数据添加到 cityIndex 
cityIndex.unshift('#')

原文 https://blog.csdn.net/weixin_45583708/article/details/103327739

admin

1011