vue中axios封装使用的完整教程


Posted in Vue.js onMarch 03, 2021

前言

如今,在项目中,普遍采用Axios库进行Http接口请求。它是基于promise的http库,可运行在浏览器端和node.js中。此外还有拦截请求和响应、转换JSON数据、客户端防御XSRF等优秀的特性。

考虑到各个项目实际使用时写法混乱,不统一。对Axios进行一下通用化的封装,目的是帮助简化代码和利于后期的更新维护,尽量通用化。

方法如下

1. vue安装axios

npm install axios -S
	或者
	npm i axios -S

2. 在main.js进行全局引入

import axios from 'axios'
	Vue.prototype.$axios = axios //将axios绑定到vue的原型上

3. 配置跨域 在根目录下vue.config.js里边

module.exports = {
	 publicPath: './',
	 //配置跨域请求
	 devServer: {
	  open: true, //是否自动打开浏览器
	  https: false, //是否开启https
	  hotOnly: false,
	  proxy: { // 配置跨域
	   '/api': {
	    target: 'http://********', //请求接口域名 
	    ws: true,
	    secure: false,
	    changOrigin: true, //是否允许跨越
	    pathRewrite: {
	     '^/api': ''
	    }
	   }
	  },
	  before: app => { }
	 }
	}

4. 在src子目录下的api文件夹下创建api.js文件进行简单的封装axios

import axios from 'axios'
//这里引用了element的loading全屏加载
import { Loading } from "element-ui";

const service = axios.create({
 baseURL: '/',
 timeout: 30000 // 设置请求超时时间
})
let loading = "";
// 请求拦截器
service.interceptors.request.use(
 (config) => {
  // 在请求发送之前做一些处理
  if (!(config.headers['Content-Type'])) {
   loading = Loading.service({
    lock: true,
    text: "加载中...",
    spinner: "el-icon-loading",
    background: "rgba(255,255,255,0.7)",
    customClass: "request-loading",
   });
   if (config.method == 'post') {
    config.headers['Content-Type'] =
     'application/json;charset=UTF-8'
    for (var key in config.data) {
     if (config.data[key] === '') {
      delete config.data[key]
     }
    }
    config.data = JSON.stringify(config.data)
   } else {
    config.headers['Content-Type'] =
     'application/x-www-form-urlencoded;charset=UTF-8'
    config.data = JSON.stringify(config.data)
   }
  }
  const token = "token"
  // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
  if (token) {
   config.headers['Authorization'] = token
  }
  return config
 },
 (error) => {
  loading.close();
  // 发送失败
  console.log(error)
  return Promise.reject(error)
 }
)

// 响应拦截器
service.interceptors.response.use(
 (response) => {

  loading.close();
  // dataAxios 是 axios 返回数据中的 data
  // loadingInstance.close();
  const dataAxios = response.data
  // 这个状态码是和后端约定的

  return dataAxios
 },
 (error) => {
  return Promise.reject(error)
 }
)

	export default service

5. 在api文件夹下创建http文件

// 引入封装好的axios
 // ps:如果没有封装,正常引入axios即可
  import axios from "./api";
	// 	/api为配置跨域的路径变量
  let reportUpload= '/api/report/upload'
  export const Upload= () => {
   return axios.get( reportUpload )
  }

6. 在页面中调用接口

// 引入封装好的接口
 	import { Upload} from "@/api/http.js"; 

// 调用时使用
 async Upload() {
  let { result } = await getlist ();
  	console.log(result)
 },

总结

到此这篇关于vue中axios封装使用的文章就介绍到这了,更多相关vue axios封装使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue 插槽简介及使用示例
Nov 19 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 #Vue.js
详解vue3中组件的非兼容变更
Mar 03 #Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 #Vue.js
Vue多选列表组件深入详解
Mar 02 #Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 #Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 #Vue.js
vue脚手架项目创建步骤详解
Mar 02 #Vue.js
You might like
学习使用PHP数组
2006/10/09 PHP
一个PHP+MSSQL分页的例子
2006/10/09 PHP
php-fpm配置详解
2014/02/12 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python+django快速实现文件上传
2016/10/24 Python
python实现二分查找算法
2017/09/21 Python
Python中的asyncio代码详解
2019/06/10 Python
Python自省及反射原理实例详解
2020/07/06 Python
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
2014社区三八妇女节活动总结
2014/03/01 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
借款协议书
2014/04/12 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript