vue项目中封装axios请求

1.前言：之前是我负责这个项目的搭建，及打包上线，整个项目都是我一个人来做，所以接口写的遍地都是，造成了浏览起来很难受，不便于维护 ，所以就打算封装一下axios 创建一个apis 的js文件来集中管理接口，走着！

首先考虑的是通过promise来封装axios，使代码看起来更清晰明了

2.1 项目中引入axios
使用npm安装

    $ npm install axios

main.js引入axios模块

import axios from 'axios'
Vue.prototype.$http = axios

3.promise封装axios
项目新建一个utils.js文件

    /***
     *
     * promise 二次封装请求
     */
    import axios from "axios";
    // 一些请求的基本配置
    const service = axios.create({
      baseURL: "************", // 接口的域名地址
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    });
    
    // 输出方法
    export default function request(url, data = {},method="post") {  // 如果此处的method为get 则需要传入get，默认为post
      return new Promise((resolve, reject) => {
        const options = {
          url,
          method
        };
        if (method.toLowerCase() === "get") {   
          options.params = data;		//如果为get传参为params
        } else {	
          options.data = data;   //  post等 传数据为data
        } 
        service(options)
          .then(res => {
            console.log("返回数据", res);
            resolve(res.data);   //返回数据
          })
          .catch(error => {
            reject();
            console.error(error);  //异常捕获
          });
        });
    }

4.再apis文件引入封装好的utils.js文件

    import request from "../utils/utils"  // 引入utils.js 

将所有接口集中再api对象里面管理

    const api = {
      // 获取验证码
      get_code(data) {
        return request("api", data,'get');   // 修改请求方式
      },
      // 登录
      login(data) {
          return request("api",data);
      }
    }

将api暴露出去，供页面组件引用

    export default api;

apis.js文件完整代码

    /**
     *
     * 引入封装好的request
     * api 接口库
     */
    import request from "../utils/utils";
    
    const api = {
      // 获取验证码
      get_code(data) {
        return request("api", data,'get');
      },
      // 登录
      login(data) {
          return request("api",data);
      }
    };
    export default api;

5.页面引用

     let data = { telephone: this.data.inputName }  //需要上传的参数

发起请求

     //请求参数
            API.get_code(data)
              .then(res => {
                this.$message({showClose: true, message: res.msg,type: "success" });
                })   
              .catch(err => {
                //请求失败
              });                

6.请求成功

嘿嘿结束！！！