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方法