频道列表模块 (三) 01-重构我的频道API-获取我的频道列表（未登录，默认频道列表，已登录，我的频道列表）-JSON.parse()

重构我的频道API-获取我的频道列表（未登录，默认频道列表，已登录，我的频道列表）-JSON.parse()

• 在请求拦截器加上了token 头部是否有token

• 兼容本地存储

  src/api/channel.js

import store from '@/store'
// 约定  本地存储  频道的数据KEY
// 约定  本地存储  频道的数据VALUE [{id:'频道ID',name:'频道名称'},...]
const CHANNEL_KEY = 'hm-toutiao-m-79-channels'
/**
 * 获取我的频道列表（未登录，默认频道列表，已登录，我的频道列表）
 * 在请求拦截器加上了token   头部是否有token
 */
// 修改API  让它支持本地存储
// 1. 登录了  返回用户频道
// 2. 没登录
// 2.1 如果频道已经存在本地  获取本地频道
// 2.2 没有把频道存在本地  获取默认频道 然后存储在本地
// 3. 返回值promise（不能改，返回数据格式也不能改）
export const getMyChannels = () => {
  // return request('app/v1_0/user/channels', 'get')
  return new Promise(async (resolve, reject) => {
    // 用户信息
    const user = store.state.user
    if (user.token) {
      // 登录  返回用户频道
      const data = await request('app/v1_0/user/channels', 'get')
      resolve(data)
    } else {
      const channelsStr = window.localStorage.getItem(CHANNEL_KEY)
      if (channelsStr) {
        // 有本地频道
        const channelsJson = JSON.parse(channelsStr)
        // 和后端数据格式保持一直  将来调用逻辑不用修改
        resolve({ channels: channelsJson })
      } else {
        // 没有本地频道
        // 获取默认频道
        const data = await request('app/v1_0/user/channels', 'get')
        // 存储起来
        window.localStorage.setItem(CHANNEL_KEY, JSON.stringify(data.channels))
        // 数据返回出去
        resolve(data)
      }
    }
  })
}

• 注意：

  • 本地存储，返回数据格式，和后端保存一致。

  知识点

  JSON.stringify()与toString()的区别

  这两者虽然都可以将目标值转为字符串，但本质上还是有区别的，比如

  let arr = [1,2,3];
  JSON.stringify(arr);//'[1,2,3]'
  arr.toString();//1,2,3
  

  其次，JSON.stringify()的受众更多是对象，而toString()虽然可以将数组转为字符串，但并不能对{name:‘天子笑’}这类对象实现你想要的操作，它的受众更多是数字。