封装axios统一管理API接口

今天使用vue+element写了一个小demo,把axios进行了封装处理。

经过封装处理的axios在实际项目开发中可以大大提高你的效率和代码可维护性。

1.首先在src目下新建了一个名为http的文件夹。

2.然后在http文件内新建两个js文件，我取名为axios.js和api.js。

3.在axios.js中就对请求代码进行封装（axios使用说明：传送门）。

import axios from 'axios';
import Qs from 'qs';
// import { Message, Loading } from 'element-ui'; // 消息提示框组件 这个你们可以不用


// 环境的切换
if (process.env.NODE_ENV == 'development') { 
    axios.defaults.baseURL = 'https://cnodejs.org/api/v1';
   } else if (process.env.NODE_ENV == 'debug') { 
    axios.defaults.baseURL = 'https://cnodejs.org/api/v1';
   } else if (process.env.NODE_ENV == 'production') { 
    axios.defaults.baseURL = 'https://cnodejs.org/api/v1';
   };

// 设置请求超时时间
axios.defaults.timeout = 10000;

// 设置post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截
axios.interceptors.request.use( config => { 
    // 在发送请求之前做些什么 验证token之类的
   // Loading.service(true);
     return config; 
    }, error => { 
    // 对请求错误做些什么
     return Promise.error(error); 
    })

// 响应拦截
axios.interceptors.response.use( response => {
    // 对响应数据做点什么
    return response;
  }, error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  });


// 封装get方法和post方法

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params){ 
    return new Promise((resolve, reject) =>{ 
    axios.get(url, {  
     params: params 
    }).then(res => {
     resolve(res.data);
     Loading.service(true).close();
    //  Message({message: '请求成功', type: 'success'});
    }).catch(err => {
     reject(err.data) 
     //Loading.service(true).close();
     Message({message: '加载失败', type: 'error'});
    }) 
   });}

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
     axios.post(url, Qs.stringify(params))
    .then(res => {
     resolve(res.data);
     Loading.service(true).close();
    //  Message({message: '请求成功', type: 'success'});
    })
    .catch(err => {
     reject(err.data)
    // Loading.service(true).close();
     Message({message: '加载失败', type: 'error'});
    })
    });}

4.在api.js中进行接口统一管理，第一步先导入我们封装的axios.js文件，然后下面进行接口封装导出。（代码中都有注释）

/** 
 * api接口统一管理
 */
import { get, post } from './axios'; 

/**
 * 
 * @param {string} params 
 * 我们定义了一个topics方法
 * 这个方法有一个参数params
 * params是我们请求接口时携带的参数对象
 * 而后调用了我们封装的post方法
 * post方法的第一个参数是我们的接口地址
 * 第二个参数是topics的params参数
 * 即请求接口时携带的参数对象
 * 最后通过export导出topics。
 */

// 主题首页
export const topics = params => get('/topics', params);

5.最后在我们的需要使用的页面就可以直接调用接口进行请求了。

import { topics } from '@/http/api.js'; // 导入接口
      
  topics({
            page:this.pageIndex,  // 请求参数
            tab:this.tabType,    // 请求参数
            limit:this.pageSize    // 请求参数
        }).then( res=> {
            console.log(res)   // 成功回调
        })

附上完整demo地址：Git传送门（clone下来后请先npm install安装依赖）

封装axios统一管理API接口

猜你喜欢