使用axios/vue-resource发送HTTP请求

1.封装axios请求

1.1 初始化环境

vue init webpack deaxios

npm install axios –S

cnpm install vuex -S

1.2 封装axios（创建 src/api 文件夹）

config\urls.js 配置全局url变量

export default {
  // api请求地址
  // API_URL: 'http://mup.dev.yiducloud.cn/'
  API_URL: 'http://1.1.1.3:8888'
}

src\api\ajax.js

import Axios from 'axios'
import URLS from '../../config/urls'

//1、使用自定义配置新建一个 axios 实例
const instance = Axios.create({
  baseURL: URLS.API_URL,
  headers: {
    'Content-Type': 'application/json'
  }
});

//2、添加请求拦截器
instance.interceptors.request.use(
  config => {
    //发送请求前添加认证token
    config.headers.Authorization = sessionStorage.getItem('token')
    // console.log(sessionStorage.getItem('token'),11223344)
    return config
  },
  err => {
    return Promise.reject(err)
  });

//3、添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据处理
  if (response.status === 200 || response.status === 201 || response.status === 400) {
    const data = response.data
    if (data.code === 200 || data.code === 201) {
      return data
    }
  }
  return Promise.reject(response)
}, function (error) {
  if (error.response) {
    switch (error.response.status) {
      case 400:
        return Promise.reject(error.response.data)
      case 401:
        window.location.href = '/login'
    }
  }
  // const errorData = error.response.data
  // if (errorData.code === 400) {
  //   return Promise.reject(errorData.desc)
  // }
  // return Promise.reject(errorData)
})

// export const getNodegroups = params => { return instance.get(`${base}/nodegroup/v1/nodegroups/list/`, params).then(res => res.data) }
// export const getNodegroups = params => { return instance.get(`/nodegroup/v1/nodegroups/list/`, params).then(res => res) }
export default instance

src\api\api.js

import URLS from '../../config/urls'
import ajax from './ajax'
let base = URLS.API_URL

// 用户相关
export const requestLogin = params => { return ajax.post(`${base}/users/v1/user/login/`, params).then(res => res) }

src\api\index.js

import * as api from './api'

export default api

1.3 使用vuex

src\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
import login from './modules/login/login'

Vue.use(Vuex);

export default new Vuex.Store({
  modules:{
    login
  }
});

src\store\modules\login\login.js

import {
  requestLogin,
} from '../../../api/api'  // 导入封装后的axios请求

const state = {}

const getters = {}

const actions = {
  async loginMethod ({commit}, params) {
    return requestLogin(params).then(response => response)
  },
};

const mutations = {}

export default {
  state,
  getters,
  actions,
  mutations
}

1.4 入口

main.js 导入store

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

App.vue 组件发送请求

<template>
  <div id="app">
    <p @click="handleLogin">点击发送axiso请求</p>
    <router-view/>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
export default {
  name: 'App',
  methods: {
    ...mapActions(['loginMethod']),
    handleLogin () {
          var loginParams = { username: 'zhangsan', password: '123456' }
          this.loginMethod(loginParams).then(response => {
            // this.logining = false
            sessionStorage.setItem('token', response.data)
            // this.$router.push({ path: '/' })
          }).catch(error => {
            this.loading = false
            this.error(error.desc ? error.desc : '服务器异常')
          })
        }
    },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

1.5 封装axios作用

	1. 我们在此将此项目所用到的所有接口调用方法都做了定义，这样既方便查看也利于管理。在
	2. 我们需要调用接口方法的时候，我们只需要在对应vue文件中的标签里直接import想用的接口方法就行了
	例如：import { getOptList,branchList,addOperator } from "../../api/index";

1.6 使用vuex发送get请求

src\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
import meeting from './modules/meeting/meeting'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    meeting
  }
})

src/store/modules/meeting/meeting.js

import {
  getMeetingList
} from '../../../api/api'
import {getUrl} from "../../../utils/global/geturl";  // 导入封装后的axios请求

const state = {};

const getters = {};

const actions = {
  async getMeetingListMethod ({commit}, params) {
    return getMeetingList(getUrl(params)).then(response => response)
  },
};

const mutations = {};

export default {
  state,
  getters,
  actions,
  mutations
}

src/views/meeting/index.vue

<template>
 
</template>

<script>
  import { mapActions } from 'vuex'
  export default {
    data() {
      return {};
    },
    methods: {
      ...mapActions(['getMeetingListMethod']),

      // 获取会议室信息
      requestMeetingListMethod () {
        var parms = {};
        this.getMeetingListMethod(parms).then(response => {
          console.log(123456)
          console.log(response)
          // this.tableData = response.data.data_list
          // this.listQuery.total = response.data.total
          this.loading = false
        }).catch(error => {
          this.loading = false;
          this.error(error.desc ? error.desc : '服务器异常')
        })
      },
    },

    created(){
      this.requestMeetingListMethod();  // 获取会议室信息
    },
  };
</script>

<style scoped>


</style>