vue中axios封装和api接口管理

vue中Axios的封装和API接口的管理

我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。

一、axios的封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。

1. 安装

npm install axios; // 安装axios

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
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import {
    Toast } from 'vant'; 
//element-ui 的loging，和信息提示
import {
   Loading, Message} from 'element-ui'

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: