В чем проблема появления TypeError: Cannot read property 'protocol' of null?

Question

[Wilt]

Код не мой, человека который писал это нету. Ошибка связанная с этими частями кода такая:

Uncaught (in promise) TypeError: Cannot read property 'protocol' of null

computed: {
    articlesListN() {
      return this.$store.state.articlesList
    }
  },
  mounted() {
    const url = `https://#############/api/articles/scroll?cursor=cj0x&#############=8`
    this.$store.dispatch('getArticlesList', url)
  },
  methods: {
    showNext(url) {
      this.$store.dispatch('getArticlesList', url)
    },
    showPrev(url) {
      this.$store.dispatch('getArticlesList', url)
    }
  }

state: {
      articles: [],
      articlesList: { results: [] },
      fullArticleList: [],
      url: '',
      loadArticle: false
    },
    getters: {
      articles(state) {
        return state.articles
      },
      articlesList(state) {
        return state.articlesList
      },
      getFullArticle(state) {
        return state.fullArticleList
      },
      loadArticle(state) {
        return state.loadArticle
      }
    },
    mutations: {
      getArticles(state, articles) {
        state.articles = articles
      },
      getArticlesList(state, articlesList) {
        state.articlesList = articlesList
      },
      getFullArticle(state, article) {
        state.fullArticleList.push(article.results[0])
        state.url = article.previous
        state.loadArticle = false
      },
      loadArticle(state) {
        state.loadArticle = true
      }
    },
    actions: {
      async getArticles({ commit }) {
        const res = await axios.get(
          `https://#############/api/articles/scroll?cursor=#############=5`
        )
        commit('getArticles', res.data.results)
      },
      async getArticlesList({ commit }, url) {
        const res = await axios.get(url)
        commit('getArticlesList', res.data)
      },
      async getFullArticle({ commit }, initialId) {
        commit('loadArticle')
        const id = Buffer.from(`r=0&p=${initialId - 1}`).toString('base64')
        const res = await axios.get(
          `https://#############/api/articles/scroll?cursor=${id}&#############e=1`
        )
        commit('getFullArticle', res.data)
      },
      async addArticle({ commit, state }) {
        commit('loadArticle')
        const res = await axios.get(state.url)
        commit('getFullArticle', res.data)
      },
      deleteArticles({ state }) {
        state.fullArticleList = []
      }
    }

Answer 1

[0xD34F]

Вот здесь url имеет значение null:

await axios.get(url)

Или здесь - state.url является null:

await axios.get(state.url)

Могу даже предположить, откуда этот null берётся. Второй вариант, со стейтом. В мутации getFullArticle (кстати, почему get? - вы тут данные не запрашиваете, а кладёте в стейт, правильнее было бы set) помимо прочего выполняется соответствующее присваивание:

state.url = article.previous

Т.е., как я понимаю, получаете данные статьи, в том числе - ссылку на соседнюю статью. В какой-то момент, у очередной статьи не оказывается соседней, вместо ссылки в previous сидит null.

Что делать - во-первых, проверять непосредственно перед запросом, чем является state.url. Во-вторых, вообще не давать пользователю возможности запрашивать данные, если state.url кривой. Для этого в компоненте сделайте вычисляемое свойство, которое в зависимости от корректности state.url будет принимать значение true или false, и пусть это свойство отвечает за отключение кнопки или сокрытие ссылки или как там у вас организован запрос новых данных.