Axios的正确食用方法
这里分享出我个人封装的一个axios,我会尽量每行注释,希望对大家有所帮助。
1. 安装
全局执行代码
npm install axios;
2. 编写全局axios文件(附件里有代码)
在src目录中创建一个axios目录,里面创建一个index.js文件
写上全局index.js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import axios from 'axios' //引入axios const methodType = 'get' | 'post' | 'delete' | 'put' //设置全局提交类型 const DataParamsMethod = [ 'post' , 'delete' , 'put' ] //设置数据提交的类型 export class Http { //定义全局http事件 header httpOpts constructor() { this .header = {} //设置访问的header头部 this .httpOpts = { //设置默认的访问参数 method: 'get' , //访问类型 noHandleError: false , //访问失败 noHandle401: false , //访问401 noHandle403: false , //访问403 noHandle500: false //访问500 } } //定义类库中的get事件 get (url, data = {}, opts={}) { opts.method = 'get' //修改全局提交类型 return this .request(url, data, opts) // 调用方法,开始访问 } //定义类库中的post事件 post(url, data = {}, opts={}) { opts.method = 'post' //修改全局提交类型 return this .request(url, data, opts) // 调用方法,开始访问 } //总访问方法 request(url, data = {}, opts={}) { opts = { ... this .httpOpts, ...opts } // 导入全局类型等数据 const contentType = 'application/json' //定义返回头头部 return new Promise((resolve, reject) => { //定义promise事件,开始访问 const method = opts.method || 'get' //定义访问类型 void axios({ url, //访问地址 baseURL: process.env.baseURL || process.env.apiUrl || 'https://static.popodv.com' , //设置访问前缀,可以设置总访问的前缀 data: data ? data : {}, //post设置数据 params : opts.method === 'get' ? data : {}, //get设置数据 timeout: 60 * 1000, // 请求超时 headers: { ... this .header, //设置headers头部 'content-type' : contentType //设置返回头头部 }, method //设置访问类型 }) .then((res) => { //当有回调时 if (res.status === 200) { return resolve(res.data) //返回数据 } else if (res.status === 500) { //访问报错,参数问题 return resolve(res.data) //返回数据,方便代码操作 } }) . catch (err => { //总访问报错 return reject(err) //调用错误回调 }) }) } } |
3. 编写api文件
在src目录中创建一个api目录,里面创建一个index.js文件
写上各个接口的访问代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 引入axios封装文件 import { Http } from '@/axios/index.js' //定义全局axios事件 const axios = new Http() // get方法案例 export function getTest () { return axios. get ( '/data/attr/gfs.json' ) } // post方法案例 export function postTest (name) { return axios.post( 'https://static.popodv.com/data/attr/gfs.json' ,{ name:name }) } |
4. 页面引用
页面上引入
1 | import {getTest} from '@/api/index.js' |
调用代码
1 2 3 4 5 6 | async mounted() { const res = await getTest(); if (res.status == 200){ console.log(res.data) } } |
效果图:
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
2020-12-18 JS实现计算器,带三角函数,根号