vue--axios异步请求及文件目录结构分析（个人记录）

我这里使用axios进行异步加载

axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定,即直接在main.js中使用Vue.prototype.$http = axios，然后使用axios.get()等方法
vue-axios是将axios集成到Vue.js的小包装器，协助axios在vue中像插件一样进行安装，即可以使用Vue.use(VueAxios,axios);

首先下载axios、vue-axios：

npm install axios vue-axios -D

结合vuex进行的异步请求封装

//加载vuex，管理数据
npm install vuex -D
//实现数据持久化
npm install vuex-persistedstate -D

1、在src下新建store文件夹，在store文件夹中新建index.js,内容如下：

import Vue from 'vue';
import 'babel-polyfill'
import Vuex from 'vuex';
import common from './modules/common';
import createPersistedState from 'vuex-persistedstate'
//使用 vuex-persistedstate  这是一个用于 vuex 在页面刷新之间处理和存储状态的插件。

Vue.use(Vuex);
export default () => {
  return  new Vuex.Store({
    modules: {
      common:common
    },
    plugins: [createPersistedState()]
  })
};

2、在store文件夹中新建modules文件夹，用于区分不同模块管理数据，文件夹中新建一个测试模块common.js,内容如下：

import Lockr from 'lockr'
Lockr.prefix = 'lockr';
import * as asynRequest from '../../asyn_request/home.js';

const state = {
  msg:'',//数据
};
const getters = {
  getMsg:state => state.msg,
};
const mutations = {
  setMsg(state,param){
    state.msg = param;
  }
};
const actions = {
  test_ ({commit},params){
    return asynRequest.getTest({commit},params);
  }
}
export default {
  namespace:true,//单独模块可以写相同名字
  state,
  getters,
  mutations,
  actions
}

3、在src下新建utils文件夹，在文件夹中新建http_util.js文件，用于axios封装及异步请求拦截，内容如下：

/*axios异步请求*/
import Vue from 'vue'
import axios from 'axios'
const baseUrl = Vue.prototype.baseUrl;//全局配置的参数

// http request 拦截器
axios.interceptors.request.use(
  config => {
    return config;//只有return config后，才能成功发送请求
  },
  err => {
    return Promise.reject(err);
  });

// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response;//只有return '数据'后才能完成响应
  },
  error => {
    return Promise.reject(error.response.data)  // 返回接口返回的错误信息
  });

/*自定义axios异步请求*/
let Axios = axios.create({
  baseURL: baseUrl,
  timeout: 1000000,// 如果请求的时间超过'timeout'，请求将被中止。
  responseType:'json',// “responseType”表示服务器将响应的数据类型,包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  headers:{
    'content-type':'application/x-www-form-urlencoded'   //转换为key=value的格式必须增加content-type
  },
  // transformRequest:[function(data){
  //   return qs.stringify(data);    //利用对应方法转换格式
  // }]
});

function httpApi (method, url, params) {
  return new Promise((resolve, reject) => {
    Axios({
      method: method,
      url: url,
      data: method === 'POST' || method === 'PUT' ? params : null,//data是添加到请求体（body）中的， 用于post请求。post请求的时候不存在params
      params: method === 'GET' || method === 'DELETE' ? params : null,//params是添加到url的请求字符串中的，用于get请求。get请求的时候不存在data
    }).then(
      (response) => {
        resolve(response)
      }
    ).catch(
      (error) => {
        reject(error)
      }
    )
  })
}

// 返回在vue模板中的调用接口
export default {
  get: function (url, params) {
    return httpApi('GET', url, params)
  },
  post: function (url, params) {
    return httpApi('POST', url, params)
  },
  put: function (url, params) {
    return httpApi('PUT', url, params)
  },
  delete: function (url, params) {
    return httpApi('DELETE', url, params)
  }
}

4、在src下新建asyn_request文件夹，用于存放不同模块的异步加载方法具体内容，在文件夹下新建测试js文件home.js,内容如下：

import asyn_request from '@/utils/http_util';//引入异步请求封装
const baseUrl = Vue.prototype.baseUrl;//全局配置的参数

 import qs from 'qs'; export function getTest({commit},params) {
　　let url = baseUrl+'XXXXXXXX';
  return new Promise((resolve,reject) => {
    asyn_request.post(url,qs.stringify(params)).then(
      (response) => {
        commit('test2','111111111111111111111');
        resolve(response)
      }
    ).catch(
      (error) => {
        reject(error)
      }
    )
  });
}

5、在组件中使用：

先导入import {mapActions} from 'vuex';

在methods中声明 ...mapActions(['test_'])

在mounted中调用方法： this.test_({testMsg:'XXXXXX'}).then((res)=>{console.log(res)}).catch((error)=>{console.log(error)})

项目比较小，这里就没添加统一管理方法名的文件

有什么写的不好的地方，希望可以指出来，大家一起进步