vue项目封装api接口（详解）

在前端vue的开发中，有一点是必须要做的，那就是将所有的API接口封装起来，因为从开发到最终上线的过程中，API是需要经常更换的，所以需要将API封装起来，便于修改和更换。

在所有的API中，每一个API都会分成两个部分，比如：https://www.csdn.net/GetEnterpriseInfo这是分成基本路径和最后的方法两部分的，一般情况下如果需要更换API的时候，只是更换前半部分，最后的方法是不会改变的。

1.在src目录下新建一个api.js文件，然后在文件中写入：

import { Message } from 'element-ui'//按需引入
// Vue.use
//例子（原api接口）：https://www.csdn.net/GetEnterpriseInfo
const url = 'https://www.csdn.net/'//api接口

const api = {
  GetEnterpriseInfo: url + 'GetEnterpriseInfo'//api方法
}
//msdID是状态码、time时间
const errorMeaage = function(msgID,time){
   if(msgID=='1002'){
      Message.error('请求失败,超出请求限制')
  	}else if(msgID=='429'){
  	 //增加请求频率过高后的限制
      if(time<=60){
         time=time;
         Message.error('请求频率过高,请'+time+'秒后再试！')
      }else{
         time=parseInt(time*1/60)
         Message.error('请求频率过高,请'+time+'分后再试！')
      }
     
   }
}
export default {
  api: api,
  errorMeaage: errorMeaage
}

2.这就封装完了一个 API 配置文件了，然后在调用的时候，直接引入即可：

import axios from "axios";
import api from "@/api.js";
import qs from "qs";
//请求方法
GetProvincialEnterprise() {
      var _self = this;
      //加载loding层
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.5)",
        target: document.querySelector(".companyList")//加载loding层的元素class类
      });
      //请求参数
      var Data = {
        corpName: _self.corpName,
      };
      axios
        .post(api.api.GetEnterpriseInfo, qs.stringify(Data))
        .then(function(response) {
          //请求回来的数据
          var data = JSON.parse(response.data);
          loading.close();
          //判断请求回来后的数据处理
          if (data.Code == 200) {
            _self.tableData = data.Obj;
            _self.Total = data.Total;
          } else if (data.Code == 204) {
            api.errorMeaage(data.Code);
          }
        })
        .catch(function(error) {
          _self.$message.error("网络错误,请稍后在试！");
          loading.close();
        });
    },