一、前言

axios的打包和api接口的统一管理实际上是帮助我们简化代码并促进以后的更新和维护的主要目的。

在vue项目中，我们通常使用axios库与后台进行交互以获得数据，这是一个基于Promise的http库，可以在浏览器端和node.js上运行。它具有许多出色的功能，例如拦截请求和响应，取消请求，转换json以及在客户端防御XSRF。因此，我们的Yuda也果断地放弃了对其官方库vue资源的维护，直接建议我们使用axios库

二、 axios打包步骤安装axios

    npm install axios; // 安装axios复制代码
1

目录创建

通常vue 统一管理api接口，我将在项目的src目录中创建一个网络文件夹作为我们的网络请求模块，然后在其中创建http.js和api.js文件以及reques.js。 http.js文件用于封装axios，api.js用于统一管理我们的接口网址，request.js公开我们在外部放置的api方法。

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import router from '../router';
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from 'vant'; 
//element-ui 的loging，和信息提示
import {Loading, Message} from 'element-ui'
12345678

环境切换

我们的项目环境可能包括开发环境，测试环境和生产环境。我们使用节点的环境变量来匹配我们的默认接口url前缀。 Axios.defaults.baseURL可以设置axios的默认请求地址，不用多说。

创建配置目录。

在目录下创建env.development.js + env.production.js + env.test.js

env.development.js的内容如下：

module.exports={
    baseUrl:' http://www.devele.com:4456' //开发环境用到的baseurl
}
123

// 环境的切换
const {baseUrl}=require('../config/env.'+process.env.NODE_ENV);
//同时 package.json的scripts需指定测试环境的模式  --mode test
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  }
const service = axios.create({
  baseURL: baseUrl, // url = base api url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 1000*12 // 请求超时
})
12345678910111213141516

4.如上所述设置请求超时