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'});
//剩余对数据操作的代码
.
.
.
}

• 点赞 1
• 收藏
• 分享
• 文章举报