03封装请求

封装请求

请求的设置 http.js

• 安装：npm i axios
• src / api / http.js

import {Message} from 'element-ui'
import axios from 'axios'
// 设置post请求头
const baseUrl = "基础路径"; 
const request = axios.create({
    baseURL: baseUrl,
    timeout: 100000
})

//请求拦截
request.interceptors.request.use(function (config) {
    //headers 加上From参数，方便后端判断请求来源
    config.headers.From = "项目的名称"
    if(JSON.parse(localStorage.getItem("token"))){
        config.headers.Token = JSON.parse(localStorage.getItem("token"));
    }  
    //处理 ie浏览器之中 请求缓存问题
    if (config.method == 'post') {
        if(config.url != "/xd/loaninfoBatchApply/uploadFile"){
            config.headers = Object.assign(config.headers,
                {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                }
              );
            config.data = {
                ...config.data,
                _t: Date.parse(new Date()) / 1000
            }
        }
    } else if (config.method == 'get') {
        config.params = {
            _t: Date.parse(new Date()) / 1000,
            ...config.params
        }
    }
     return config;
 }, function (error) {
    return Promise.reject(error);
 });
// 请求响应
request.interceptors.response.use(
    response=>{
        return response
    },
    error =>{
        if(error && error.response){

            errorHandle(error.response.status,error.response.dat)
        }else{
            Message({message:"网络超时，检查网络设置"})
        }
        return Promise.reject(error)
    }
)
export default http;

请求的封装模块

• 使用按需导入的形势，去封装请求即可！ 封装首页模块
• src / api / home.js

import http from './http'
import Qs from 'qs'; // 处理post请求序列号

// 获取 首页的 集团数据
export function getHomeGroup(){
  return request({
      url:'XXX',
      method:'get',
  })
}

// 获取 首页的 板块数据
export function getHomePlate(groupNo){
  return request({
      url:'XXX',
      method:'get',
      // 这个是 请求的拼接参数，以对象的形势拼接即可！
      params:{
        groupNo,
      }
  })
}

// 获取 角色管理的 table 编辑角色信息
export function modifyRoleInfo(data){
  // parentId:父id; id:为当前行id; level:当前角色等级; name:当前角色名称; description:角色描述
  // data为一个对象 里面有着 。。。 等参数！
  return request({
    url:'XXX',
    method:'post',
    data,
    transformRequest: [data => Qs.stringify(data)]
  })
}

home.vue

• 使用封装的请求

import { getHomeGroup, } from "@/api/home/home.js";

// 然后调用 getHomeGroup 方法请求数据 
getHomeGroup(XXX).then(({ data }) => { 
	// 拿到请求的数据 data
})

vuex之中的使用

src / store / index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//自动引入modules的模块
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})


export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules,
})

mutation-type

• 定义一个唯一的变量，限制commit的唯一性

export const CREDIT_RESULT_OBJ = 'Credit_ResultObj'; // 内部授信额度查询 下钻的对象

src / store / modules / home.js

import { CREDIT_RESULT_OBJ } from "../mutation-type";
const home = {
  state: {
    CreditResultObj: {},
  },
  mutations: {
    //显示
    [CREDIT_RESULT_OBJ ](state, payload) {
      state.CreditResultObj= payload
    },
}
export default home;

使用state的时候 和 commit

import { CREDIT_RESULT_OBJ } from "@/store/mutation-type.js";
// 在计算属性之中 拿到值 或者 直接拿
  computed: {
    CreditResultObj() {
      return this.$store.state.homeDrawer.CreditResultObj;
    }
  },

// 这是在模板之中使用
$store.state.home.XXX(文件名称 eg:home).CreditResultObj
// 这是在js之中使用 
this.$store.state.home.XXX(文件名称 eg:home).CreditResultObj
// 提交
this.$store.commit( CREDIT_RESULT_OBJ  , 提交的数据);