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