Vue项目使用axios对请求方法二次封装

vue项目经常会用到axios来请求数据，那么首先肯定需要对这个请求方法进行一个二次封装，这样能节省不必要的重复操作和过度冗余的代码

根目录创建api文件

在api文件下创建request.js文件，然后引入vue、axios、loading组件，同时使用axios文档上的方法create创建：

import Vue from 'vue'
import axios from 'axios'
import { showLoading, hideLoading } from 'components/loading'

const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  method: 'get', // default
  withCredentials: true,
  timeout: 15000 // 请求超时时间
})

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做一些事情
    showLoading()
    return config
  },
  error => {
    //做一些有请求错误的事情
    return Promise.reject(error);
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    //使用响应数据返回响应；
    hideLoading()
    return response
  },
  error =>{
    //使用响应错误返回
    return Promise.reject(error.response.data)
  }
)

export default service

页面上使用方法

一、在api文件下创建配置参数地址方法
比如登录页面需要请求接口，那么在api文件下创建login.js，然后再创建提供调用的方法：

import request from './request'

export const login = (username, password) => {
  return request({
    url: '/user/login',
    method: 'POST',
    data: {
      'name':username,
      'password':password
    }
  })
}

export const logout = () => {
  return request({
    url: '/user/logout',
    method: 'POST'
  })
}

export const modifyPasswor = (password) => {
  return request({
    url: '/user/modify',
    method: 'POST',
    data: {
      'password':password
    }
  })
}

那么当页面上调用这个方法时，就会把当前配置的参数地址传递给request.js，当前传递过去的数据会跟axios.create自动合并，那么传过去的url会跟request.js的baseURL自动拼接在一起，如果不希望当前传过去的跟baseURL拼接，那么可以传一个完整的url

页面调用login.js方法

<template>
  <div class="login-page">
    <img src="../../common/images/logo.png"  class="logo-img">
    <h1 class="login-title">欢迎登录</h1>
    <ul class="login-list">
      <li class="login-item">
        <input type="text" placeholder="请输入工号" v-model="username"/>
      </li>
      <li class="login-item">
        <input type="password" placeholder="请输入密码" v-model="password"/>
      </li>
    </ul>
    <van-button type="info" size="large" @click="login">登录</van-button>
    <div class="login-tips">若忘记账号密码，请与您的上级联系找回</div>
  </div>
</template>

<script>
import {login} from 'api/login'
import { isEmpty } from 'utils/common'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return{
      username: '',
      password: ''
    }
  },
  methods: {
    ...mapMutations(['changeUserInfo']),
    login() {
      if(isEmpty(this.username)){
        this.$toast('请输入工号');
        return
      }
      if(isEmpty(this.password)){
        this.$toast('请输入密码');
        return
      }
      login(this.username, this.password).then((res) => {
        res = res.data
        if(res.status === '00'){
          const data = res.data
          // 登录信息放在store
          this.changeUserInfo(data)
          this.$toast(res.msg);
          this.$router.push({path: '/list'})
        }else{
          this.$toast(res.msg);
        }
      }).catch((err) => {
        this.$toast(err);
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>