axios封装以及api接口集中管理

一、axion封装

1.安装axios

npm install axios -S

2.目录创建:  

一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法。

// 在http.js中引入axios

import axios from 'axios'; // 引入axios

import router from '../router';

// vant的toast提示框组件，大家可根据自己的ui组件更改。

import { Toast } from 'vant'; 

3.环境的切换:  

我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址。
创建config目录。
目录下创建env.development.js+env.production.js+env.test.js
env.development.js内容如下：

module.exports={

    baseUrl:' http://www.devele.com:4456' //开发环境用到的baseurl

}

// 环境的切换

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 // 请求超时
})

4.如上 设置请求超时
通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。

5.post请求头的设置
post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设