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各接口，可根据自己请求数据的地址填写

// 管理apiexport 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
• 收藏
• 分享
• 文章举报

wstomc发布了14 篇原创文章 · 获赞 36 · 访问量 4711私信关注