1.新建libs文件夹 作为存放工具类文件

	新建request.js 文件

import axios from 'axios';//引入axios文件
// 设置请求时间
axios.defaults.timeout = 60000;
// 响应拦截器
axios.interceptors.response.use( res=>{
	//配置拦截内容 比如用户是否登录 
})

let baseURL = "请求域名/api/"
export default (url, data, method) => {
//此处没有单独设置 get POST请求  所以在此价格判断
		if(method=="POST"){
            return axios({
                url: baseURL + url,
                data: data,
                method: method,
                headers: {
                    'Content-Type': 'application/json',//设置请求头请求格式为JSON
                    'token':sessionStorage.getItem("token") //设置token 其中K名要和后端协调好 获取存储在vuex d的token值 store.state.token
                },
            })
        }else{
            return axios({
                url: baseURL + url,
                params: data,
                method: method,
                headers: {
                    'Content-Type': 'application/json',//设置请求头请求格式为JSON
                    'token':sessionStorage.getItem("token") //设置token 其中K名要和后端协调好 获取存储在vuex d的token值 store.state.token
                },
            })
        }
}

新建api.js文件 用于存放api接口

export default {
	// 放接口文件
	jiekou:"login/login",//会员登录
}

在min.js 全局配置

/**
 * 引入封装好的ajax网络请求以及接口地址列表
 */
import request from './lib/axios' //
import api from './lib/api'
Vue.prototype.$request = request
Vue.prototype.$api = api

最后使用

this.$request(this.$api.ToBeReviewed).then(res=>{})

有用的话点个赞吧

在做 vue 的项目中，获取后端数据使用 axios ，使用的地方可以说是很多了，我写代码总喜欢整整齐齐的，所以，对 axios 请求进行了封装，方便使用，减少了不少的冗余代码呢~

目录情况如下：

|-------src

| |-- api

| | |-- http.js

| | |-- roleApi.js

| |-- views

| | |-- role.vue

（1）首先，封装 axios 的 get、post方法、请求拦截（请求发出前处理请求）和响应拦截器（处理请求响应后的数据），新建文件 http.js：

import axios from 'axios'
import { Message } from 'element-ui'

// create an axios instance
const http = axios.create({
  baseURL: '后端接口地址',
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 50000
  // request timeout
})

// 设置 post、put 默认 Content-Type
http.defaults.headers.post['Content-Type'] = 'application/json'
http.defaults.headers.put['Content-Type'] = 'application/json'

// request interceptor 请求拦截(请求发出前处理请求)
http.interceptors.request.use(
  config => {
    // do something before request is sent
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor 响应拦截器（处理响应数据）
http.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data
    const ressuc = res.success
    // 后端返回成功失败是用 success 的true 和 false 判断，所以在这里就获取 response.data 的 success 
    if (ressuc) {
      console.log('response', response)
      return res
    } else {
      Message({
        message: res.message || 'error',
        type: 'error',
        duration: 5 * 1000
      })
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

// 封装get方法
export function get({ url, params }) {
  return new Promise((resolve, reject) => {
    http.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

// 封装post方法
export function post({ url, data }) {
  return new Promise((resolve, reject) => {
    http.post(url, data).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

（2）接下来，对不同的请求进行封装，新建文件 roleApi.js：

import { get, post } from './http' // 导入axios实例文件中方法

const server = {
  //带参数的 get 方法
  getById(param) {
    return get({
      url: '/role/getById',
      method: 'get',
      params: param
    })
  }
  //不带参数的 get 方法
  getAll() {
    return get({
      url: '/role/getAll',
      method: 'get'
    })
  },
  // post 方法
  save(param) {
    return post({
      url: '/role/save',
      method: 'post',
      data: param
    })
  }
}

export default server

（3）最后，就是在业务模块直接导入 api 文件，role.vue 文件中使用：

import apis from '@/api/roleApi'
// 用try catch包裹，请求失败的时候就执行catch里的代码
try {
     const param = {
          id: 'admin'
     }             
     const res = await apis.getById(param)
     console.log('getById:', res)
} catch (e) {
      //提示错误
      console.log(e)
} 

用这种方式，使用 axios 时只需要一句简单的代码既可以得到返回结果，可以说是很方便啦~

Vue之封装axios请求

封装axios主要是通过axios创建service实例，实例中放置配置，常见的配置有baseURL（请求发送的原始地址）、timeout（请求超时时间）、headers（请求头）、params（发送get请求的参数）、data（发送post请求的参数）、等等

封装axios请求的另外一个目的是配置请求拦截器，和响应拦截器

service.interceptors.requesst servcie.interceptors.response 注：service 不是固定名字，只要是axios实例名字都可
**详情请见axios官方文档**

/*
	service.js
	使用时因为时通过export default service 
	所以可以通过 import service from "./utils/service.js"
*/
import axios from "axios";
import {getToken} from "./auth";
import {Message} from "element-ui"; //为饿了么ui自带的message

const service = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 5000,

})
/*
  请求拦截
 */
service.interceptors.request.use((config)=>{
  if (getToken()){
    config.headers['token']=getToken(); //在发送请求之前将在请求头中配置token
  }
  return config; 
},(error)=>{
  return Promise.reject(error); // 对请求错误做些什么
})
service.interceptors.response.use((response)=>{
  const res= response;
  console.log(res);
  if (!(res.data.success)){ //请求响应，这里是我后端返回的map对象，中间的key为success传递请求响应状态
    Message({
      type: 'error',
      message: res.data.message ||'请求错误', //弹出的res.data.message 同样为后端传递
    });
    location.reload(); // 刷新表单 重新加载
    return  Promise.reject(new Error(res.data.message ||'请求错误'));
  }else {
    return  res;
  }
},(error)=>{
  Message({
    type: 'error',
    message:error.message,
  })
  location.reload();
  return Promise.reject(error);
  }
)

export default service;

Vue之封装axios.get、axios.post

/*
	这里要需要用到之前封装的service.js 也就是axios实例
	在http.js中import service from '../utils/service.js'引入
	get(传入的请求地址url，请求传递的参数){
	//主要是通过设置config中的method方法决定请求的类型
	  return service(config);
	}
	至于post和get请求的不同之处
	get传递的是params post传递的是data
	get/post 方法使用 是 import {get/post} from '../utils/http.js'
	
*/
import service from "./service";

export function get(url,params){

  const config={
    method:'get',
    url:url,
  }
  if(params){
    config.params=params;
  }
  return service(config);
}
export function post(url,params){

  const config={
    method:'post',
    url:url,
  }
  if(params){
    config.data=params;
  }
  return service(config);
}```