vue + axios + vuex 封装请求

vue + axios + vuex 封装请求

• 安装：npm i axios

axios封装请求 post get等

• api / http.js

import axios from "axios";

/**
 *调用get 和 pot请求
 * @param {*} url
 * @param {*} params
 * @param {*} type
 */

export default function http(url = "", params = {}, type = "GET") {
  // 1：定义一个promise对象
  let promise;
  return new Promise((resolve, reject) => {
    //2：判断请求方式
    if (type === "GET") {
      // 2-1：拼接请求字符串
      let paramsStr = "";
      Object.keys(params).forEach(key => {
        paramsStr += key + "=" + params[key] + "&";
      });
      // 2-2：过滤最后的&
      if (paramsStr !== "") {
        paramsStr = paramsStr.substr(0, paramsStr.lastIndexOf("&"));
      }
      // 2-3：完整路径
      url += "?" + paramsStr;
      // 2-2：发送get请求
      promise = axios.get(url);
    } else if (type === "POST") {
      promise = axios.post(url, params);
    }

    // 3：返回请求的结果
    promise
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err);
      });
  });
}

vuex 结合 axios的封装

第一步：api / index.js 请求方法

import http from "./http";

//对 api请求的统一处理

//1 ：基础base路径
const baseUrl = "http://127.0.0.1:3000"; //接口路径

//2：请求方法 vuex的第一步

//01：请求首页轮播图的数据
export const getHomeSwiper = () => {
  http(baseUrl + "/api/homeSwiper");
};

第二步：store / state.js

//state 状态数据
export default {
  //首页轮播图 vuex的第二步
  homeSwiper: []
};

第三步：store / actions.js

// vuex 的第三步 发起ajax请求
import { getHomeSwiper } from "../api/index";
import { HOME_SWIPER } from './mutation-type';

export default {
  // 首页轮播图
  async reqHomeSwiper({ commit }) {
    // 调用请求的方法 拿到数据 并且提交到mutation之中
    const res = await getHomeSwiper();
    commit(HOME_SWIPER, { homeSwiper: res.message.data });
  }
};

第四步：store / mutation-type.js

// vuex 的第四步 mutation-type的约束
export const HOME_SWIPER = 'home_swiper';//首页轮播图 

第五步：store / mutations.js

// vuex 的第五步 根据mutation-type的约束 提交 修改state的数据
import { HOME_SWIPER } from "./mutation-type";

export default {
  [HOME_SWIPER](state, { homeSwiper }) {
    state.homeSwiper = homeSwiper;
  }
};

第六步：在组件之中使用

<template>
  <div>hot</div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Hot",
  data() {
    return {};
  },
  computed: {
    ...mapState["homeSwiper"]
  },
  mounted() {
    // 最后 触发actions之中的 请求轮播图数据
    this.$store.dispatch("reqHomeSwiper");
  },
  methods: {},
  components: {}
};
</script>
<style lang="scss" scoped></style>