这里分享出我个人封装的一个axios,我会尽量每行注释,希望对大家有所帮助。

1. 安装

全局执行代码

npm install axios;

2. 编写全局axios文件(附件里有代码)

在src目录中创建一个axios目录,里面创建一个index.js文件

写上全局index.js代码

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文件

写上各个接口的访问代码

// 引入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. 页面引用

页面上引入

import {getTest} from '@/api/index.js'

调用代码

async mounted() {
  const res = await getTest();
  if(res.status == 200){
    console.log(res.data)
  }
}

效果图:

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

Axios的正确食用方法的更多相关文章

  1. tcpdump 的正确食用方法

    目录 tcpdump 使用笔记 重要报文头 字段表 ip header tcp header 基础使用 高级版本 指定ttl(通过ttl能够确定系统的类型) tcpdump 使用笔记 重要报文头 字段 ...

  2. vue 使用 axios 时 post 请求方法传参无法发送至后台

    axios 时 post 请求方法传参无法发送至后台报错如下 Response to preflight request doesn't pass access control check: No ' ...

  3. thinkphp3.2 cli模式的正确使用方法

    最近要使用thinkphp3.2版本的cli模式,手动执的话没有问题,比如php /www/index.php home/article/get 这样没有问题,但是一般用cli模式都是定时任务比较多, ...

  4. Linux重启inotify配置max_user_watches无效被恢复默认值8192的正确修改方法

    Linux下Rsync+inotify-tools实现数据实时同步中有一个重要的配置就是设置Inotify的max_user_watches值,如果不设置,当遇到大量文件的时候就会出现出错的情况. 一 ...

  5. MyEclipse10的正确破解方法

    无法转载,故给出原文链接,以供需要者. MyEclipse10的正确破解方法

  6. [转]MySQL忘记密码的正确解决方法

    http://database.51cto.com/art/201005/201986.htm 以下的文章主要介绍的是MySQL忘记密码的正确解决方法,在实际操作中如果你忘记MySQL密码是一件很头痛 ...

  7. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  8. .Net core 下的ConfigurationManager类正确引用方法

    大家在项目中经常会用到需要引用配置文件的情况,这也是我偶然间遇到的问题,菜鸟一枚,如有需纠正多谢指点. 正题 在不先引用using的情况下直接写 ConfigurationManager.AppSet ...

  9. SpringBoot 中 @RequestBody的正确使用方法

    SpringBoot 中 @RequestBody的正确使用方法 最近在接收一个要离职同事的工作,接手的项目是用SpringBoot搭建的,其中看到了这样的写法: @RequestMapping(&q ...

随机推荐

  1. [bzoj1068]压缩

    用f[i][j][0/1]表示区间[i,j],i之前有没有M的最少需要多少个字符,然后分两种情况:1.可以分为两个,转移到dp[l][mid][0]+1:2.枚举断点,但当前面有M时,后面的这个不能重 ...

  2. 如何使用Docker构建开发环境

    我们在开发中都会遇到这样的问题:在本地开发好功能后,部署到服务器,或者其他人拉到本地接着开发时,会出现功能无法使用的情况. 这些异常情况,大多数时候是因为系统不同而导致的依赖差异.因此,为了解决这个问 ...

  3. arthas 简单使用

    简介 Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱. 官网地址:https://arthas.aliyun.com/ 它可以做什么,以下功能都是直接操作线上跑着的jar包!!! ...

  4. Codeforces 739D - Recover a functional graph(二分图匹配)

    Codeforces 题面传送门 & 洛谷题面传送门 首先假设我们已经填好了所有问号处的值怎样判断是否存在一个合法的构造方案,显然对于一种方案能够构造出合法的基环内向森林当且仅当: \(\fo ...

  5. dotnet 将自动代码格式化机器人带入团队 GitLab 平台

    给团队带入一个 代码格式化机器人 能提升团队的幸福度,让团队的成员安心写代码,不用关注代码格式化问题,将格式代码这个粗活交给机器人去做.同时也能减少在代码审查里撕格式化问题的时间,让更多的时间投入到更 ...

  6. R语言实战(第二版)-part 1笔记

    说明: 1.本笔记对<R语言实战>一书有选择性的进行记录,仅用于个人的查漏补缺 2.将完全掌握的以及无实战需求的知识点略去 3.代码直接在Rsudio中运行学习 R语言实战(第二版) pa ...

  7. shell 指令

    cat/proc/parttitions df -T pstree ext4 是linux 文件系统

  8. Excel—在Excel中利用宏定义实现MD5对字符串(如:手机号)或者文件加密

    下载宏文件[md5宏] 加载宏 试验md5加密 可能遇到的问题 解决办法 下载宏文件[md5宏] 下载附件,解压,得md5宏.xla md5宏.zip 加载宏 依次打开[文件]-[选项]-[自定义功能 ...

  9. accent, access, accident

    accent A colon (:) is used to represent a long vowel [元音], e.g. sheet /ʃiːt/ and shit /ʃit/. The wor ...

  10. 零基础学习java------day7------面向对象

    1. 面向对象 1.1 概述 面向过程:c语言 面向对象:java :python:C++等等 面向对象的概念: (万物皆对象)------think in java   everything  in ...