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)})

項目比較小，這里就沒添加統一管理方法名的文件

有什么寫的不好的地方，希望可以指出來，大家一起進步