axios的二次封装

这次是对axios进行简单的二次封装（vue项目中）

• 在项目的根目录中使用 npm i axios -S 安装好axios
• 创建一个http.js文件

// 提供ajax请求
// 对axios进行二次封装
import axios from 'axios'
import {HOST} from './api'

export default class Http{

  static async request(method, url, data){
    // 发送请求
    const response = await axios.request({
      method,
      url,
      baseURL: HOST,
      params: method === 'GET' ? data : null,
      data: method === 'POST' ? data : null
    });
    // 判断是否成功
    return this.isSuccess(response);
  };

  // 判断响应结果是否成功
  static isSuccess(res){
    if(res.status >= 200 && res.status < 300){
      return res;
    }else{
      this.requestExpection(res);
    }
  };

  // 构建失败对象
  static requestExpection(res){
    throw new Error(res);
  };

  // get便捷方法
  static get(url, data){
    return this.request('GET', url, data);
  };

  // post便捷方法
  static post(url, data){
    return this.request('POST', url, data);
  }

}

api.js文件为api各接口，可根据自己请求数据的地址填写

// 管理api
export const HOST = 'http://www.baidu.com:80';

/*
xxx接口
参数：id
*/
const GOODS_LIST_API = '/api/home/catelist/itemlist';

/*
xxx接口
参数：id
*/
const GOODS_DETAIL_API = '/api/item/detail';

export default {
  GOODS_LIST_API,
  GOODS_DETAIL_API
}

• 使用

import api from '../utils/api'
import Http from '../utils/Http'

const requestGoodsListData = async ()=>{
  // 发送请求
const data = await Http.get(api.GOODS_LIST_API, {id: '1043000'});
//剩余对数据操作的代码
.
.
.
}