前端框架（VUE）配置网络请求（封装）

行笔之前、请允许我写一段毕生箴言：

历史总是要前进的，历史从来不等待一切犹豫者、观望者、软弱者；只有与历史同步伐、与时代共命运的人，才能赢得光明的未来！

一、工具：Axios 是一个基于 promise 的网络请求库

二、安装：

 Axios的应用是需要单独安装的

yarn add axios 

三、引入封装好的工具

在src\utils\request.js增加代码，如下 ：

import axios from "axios"

const errorHandle = (status,info) =>{
  switch(status){
    case 400:
      console.log("语义错误");
      break;
    case 401:
      console.log("服务器认证失败");
      break;
    case 403:
      console.log("服务器请求拒绝执行");
      break;
    case 404:
      console.log("请检查网路请求地址");
      break;
    case 500:
      console.log("服务器发生意外");
      break;
    case 502:
      console.log("服务器无响应");
      break;
    default:
      console.log(info);
      break;
   }
}
/**
 * 创建Axios对象
 */
const instance = axios.create({
  timeout:5000,
})

instance.interceptors.request.use(
  config =>{
    return config
   },
  error => Promise.reject(error)
)
instance.interceptors.response.use(
  response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
  error =>{
    const { response } = error;
    if(response){
      errorHandle(response.status,response.info)
     }else{
      console.log("网络请求被中断了");
     }
   }
)
export default instance

 四、封装请求方法与请求地址

（1）、在src\api\base.js添加代码，如下：

/**
 * 存放所有网络请求地址
 */
const base = {
  baseUrl:"http://localhost:5000",     // 公共地址
  login:"/user/login/",           // 登录地址 
  
}
export default base      //  到处默认信息

 （2）、在src\api\index.js添加代码，如下：

import axios from "../utils/request.js"
import base from "./base.js"

const api = {
  /**
   * 登录
   */
  getLogin(params) {
    return axios.post(base.baseUrl + base.login, params)
   },
}

export default api
 

 五、结尾

        走笔至此，感谢各位看官观看，如有不妥之处，敬请进言、痛改为盼！