Как управлять запросами axios и vuex в проекте

Vue.js

в предыдущем постеИспользуйте vue-cli + vant для создания шаблона мобильной разработкиВ небольшой статье мы просто построили шаблон, который подходит для разработки h5, и многие детали были опущены. Поэтому эта короткая статья покажет вам в виде картинок и текстов, в процессе разработки проекта Vue, от интерфейса запроса до страницы для получения данных, в этой серии процессов (интерфейс запроса, перехват аксиом, управление состоянием, обработка исключений и т.д.) что-то.

Адрес источника(главная ветка — это последний код, а ветка этой статьи — 2020/06/17)

предисловие

Не все интерфейсы проходят через управление состоянием vuex! Не все интерфейсы проходят через управление состоянием vuex! Не все интерфейсы проходят через управление состоянием vuex! Далее стоит написать небольшой пример, не говоря уже о том, что так надо управлять проектом.

блок-схема

Блок-схема относится к официальному сайту vuex.

1. Отправка.

Используйте mapActions для внедрения нужных нам действий в хранилище в компонент (views\About.vue)

import { mapActions } from "vuex";
export default {
  created() {
    const parameter = {id: 1}
    this.getSomeData(parameter);
  },
  methods: {
    ...mapActions("some", ["getSomeData"])
  }
};

2. Действие выполняет асинхронные операции

В этом действии выполните метод интерфейса запроса (store\modules\some.js)

async getSomeData({ commit }, parameter) {
    console.log(parameter)
    const response = await getSomeDataApi(parameter)
}

3. Интерфейс запроса Axios через вторичную инкапсуляцию

Мы инкапсулируем перехват публичных запросов, обработку исключений, заголовки запросов и т. д. для унифицированной работы путем двойной инкапсуляции аксиом. (апи\some.js)

import { axios } from '@/utils/request'
export function getSomeDataApi(parameter) {
  return axios({
    url: '/detail',
    method: 'get',
    params: parameter
  })
}

Вторичная инкапсуляция axios под utils\request

import axios from 'axios'
import { errorCode } from './errorCode'

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
  timeout: 6000 // 请求超时时间
})

// 在异常处理中，我们可以 根据error.response.status返回的状态码进行操作，比如接口返回401作权限操作等
const err = (error) => {
  if (error.response) {
    if (error.response.status !== 200) {
      // 接口接口返回的状态码，获取对应的提示消息
      const errorMessage = errorCode(error.response)
      console.log(errorMessage)
      return
    }
  }
  return Promise.reject(error)
}

// 请求拦截中，我们可以对请求头作处理，比如所有的请求都加一个token等
service.interceptors.request.use(config => {
  // const token = 'token'
  // if (token) {
  //   config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
  // }
  return config
}, err)

// 返回数据拦截中，我们可以对数据做一些小小的处理，比如后端所有接口返回的数据是这种类型:{data: {...}}，那我们就可以把data这一层给过滤掉
service.interceptors.response.use((response) => {
  return response.data
}, err)


export {
  service as axios
}

В приведенном выше коде есть baseURL, значение которого мы можем получить из файла .env Функция этой штуки — добавить публичный адрес перед всеми запросами. Например, /api нужно добавить перед всеми интерфейсами для форварда фоновым интерфейсом.Мы точно не будем добавлять его по одному перед всеми интерфейсами, что было бы хлопотно и трудоемко.В данный момент мы можем использовать базовый URL.

В-четвертых, получить возвращенные данные

После получения данных, если мы хотим получить результат немедленно, мы можем передать параметр обратного вызова в виде обратного вызова от Action к компоненту.

1. Измените Some.vue и добавьте параметр обратного вызова

import { mapActions } from "vuex";
export default {
  created() {
    const parameter = {id: 1}
    this.getSomeData(parameter);
    this.doSomeCallback({
      parameter,
      callback: res => {
        console.log('这里是actions里callback回来的数据' + res)
      }
    });
  },
  methods: {
    ...mapActions("some", ["getSomeData", "doSomeCallback"])
  }
};

2. Измените store\modules\some.js

async doSomeCallback({ commit }, { parameter, callback }) 
    const response = await getSomeDataApi(parameter)
    if (callback) callback(response)
 }

Пять, совершить

Получив интерфейс данных, возвращенный в Action, мы можем зафиксировать этот метод, реализацию Mutation. Модифицировать магазин\модули\some.js

import { getSomeDataApi } from '@/api/some'

const mutations = {
  setSomeData: (state, data) => {
    console.log(data)
  }
}

const actions = {
  async getSomeData({ commit }, parameter) {
    console.log(parameter)
    const response = await getSomeDataApi(parameter)
    commit('setSomeData', response)
  },
  async doSomeCallback({ commit }, { parameter, callback }) {
    console.log(parameter)
    const response = await getSomeDataApi(parameter)
    commit('setSomeData', response)
    if (callback) callback(response)
  },
}

В-шестых, МУТАЦИЯ

Единственный способ изменить состояние в хранилище Vuex — отправить мутацию. После того, как мы получим данные, мы изменяем значение в состоянии. Код финального store\modules\some.js

import { getSomeDataApi } from '@/api/some'

const state = {
  someData: ''
}

const mutations = {
  setSomeData: (state, data) => {
    // 为了演示效果我加了个Math.random()
    state.someData = data ? data : Math.random()
  }
}

const actions = {
  async getSomeData({ commit }, parameter) {
    console.log(parameter)
    const response = await getSomeDataApi(parameter)
    commit('setSomeData', response)
  },
  async doSomeCallback({ commit }, { parameter, callback }) {
    console.log(parameter)
    const response = await getSomeDataApi(parameter)
    commit('setSomeData', response)
    if (callback) callback(response)
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

7. Рендеринг

После изменения значения в состоянии, если значение, связанное с нашим компонентом, изменится, страница будет обновлена. Измените Some.vue.

import { mapState } from "vuex";

computed: {
    ...mapState("some", ["someData"])
}

<div class="about">
    {{someData}}
</div>

Окончательный код нашего Some.vue выглядит так

<template>
  <div class="about">
    <router-link to="/">Home</router-link>
    <Button type="primary" @click="doSomeCallback">点击修改state里的值</Button>
    {{someData}}
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { Button } from "vant";
export default {
  computed: {
    ...mapState("some", ["someData"])
  },
  created() {
    const parameter = { id: 1 };
    this.getSomeData(parameter);
    this.doSomeCallback({
      parameter,
      callback: res => {
        console.log("这里是actions里callback回来的数据" + res);
      }
    });
  },
  methods: {
    ...mapActions("some", ["getSomeData", "doSomeCallback"])
  },
  components: {
    Button
  }
};
</script>
<style lang="less">
.about {
  height: 100vh;
  font-size: 14px;
}
#detail {
  font-size: 14px;
}
</style>

Примечания по использованию vuex

Преимущества: если все интерфейсы управляются vuex, существует фиксированный процесс, который более организован и прост в обслуживании.

Недостатки: из-за чрезмерного количества компонентов и данных данные в vuex будут становиться все больше и больше, и использование памяти также будет становиться все больше и больше.

Более распространенное использование vuex: несколько компонентов используют общие данные интерфейса (например, фоновое управление данными раскрывающегося списка), управление состоянием приложения (например, хранилище пользовательских данных в приложении h5) и т. д. . .

Для конкретной справкиКартинка, чтобы понять, какие данные нужно хранить в Vuex.Должен ли я хранить эти данные в Vuex — когда мне следует использовать Vuex?

Заимствовать чужую фотографию:

Суммировать

Приведенный выше процесс через интерфейс запроса к обновлению страницы показывает, как управлять запросами axios и vuex в проекте. Из-за моих плохих навыков письма в статье могут быть некоторые запутанные предложения, надеюсь, вы понимаете. (Исходный код находится в начале статьи)

Спасибо за чтение. Если у вас есть какие-либо изменения или предложения, пожалуйста, не стесняйтесь вносить их.

Категории