axios封装

axios封装

1、初始化环境
vue init webpack deaxios

npm install axios –S

cnpm install vuex -S

    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

3、使用vuexsrc\store\index.js
3.1

import Vue from 'vue'
import Vuex from 'vuex'
import login from './modules/login/login'
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
    login
 }
});

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

4、入口
4.1 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/>'
    })
    

4.2 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>

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