如何封装VUE的axios请求
index.js
/* eslint-disable */
// 对axios做封装, 封装get post
const axios = require('axios');
// import qs from 'qs'
axios.defaults.baseURL = 'http://127.0.0.1:8000';
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
/**
* 设置请求传递数据的格式(看服务器要求的格式)
* x-www-form-urlencoded
* 默认提交表单
* 把数据对象序列化成 表单数据
*/
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
// axios.defaults.transformRequest = data => qs.stringify(data);
/**
* 设置默认提交 json
* 把数据对象序列化成 json 字符串
*/
axios.defaults.headers['Content-Type'] = 'application/json';
axios.defaults.transformRequest = data => JSON.stringify(data);
/**
* 请求拦截器
*/
axios.interceptors.request.use(config => {
// 从localStorage中获取token
let token = localStorage.getItem('token');
// 如果有token, 就把token设置到请求头中Authorization字段中
token && (config.headers.Authorization = token);
return config;
}, error => {
return Promise.reject(error);
});
/**
* 响应拦截器
*/
axios.interceptors.response.use(response => {
// 当响应码是 2xx 的情况, 进入这里
// debugger
return response.data;
}, error => {
// 当响应码不是 2xx 的情况, 进入这里
// debugger
return error
});
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params, headers) {
return new Promise((resolve, reject) => {
axios.get(url, { params, headers }).then(res => {
resolve(res)
}).catch(err => {
reject(err.data)
})
})
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
**/
export function post(url, params, headers) {
return new Promise((resolve, reject) => {
axios.post(url, params, headers).then((res) => {
resolve(res)
}).catch((err) => {
// debugger
reject(err)
})
})
}
export function put(url, params, headers) {
return new Promise((resolve, reject) => {
axios.put(url, params, headers).then((res) => {
resolve(res)
}).catch((err) => {
// debugger
reject(err)
})
})
}
export function del(url, params, headers) {
return new Promise((resolve, reject) => {
axios.delete(url, { data: params, headers }).then((res) => {
resolve(res)
}).catch((err) => {
// debugger
reject(err)
})
})
}
export default axios;
调用 apis.js
/* eslint-disable */
// 接口信息, 生成请求方法
// 引入 get方法, post方法
import axios, { get, post,put,del } from './index'
export const getBooks = (params, headers) => get("/user/bookinfo/", params, headers)
export const addBook = (params, headers) => post("/user/bookinfo/", params, headers)
export const editBook = (params, headers) => put("/user/bookinfo/", params, headers)
export const delBook = (params, headers) => del("/user/bookinfo/", params, headers)
坚持,坚持,坚持……
在你选择不放弃的那一刻,
成功其实已经在向你走近
我们无法得知什么时候会来临
但我们可以选择用自强的双手敲开幸福的门。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)