vue项目中对axios的全局封装

项目中接口会很多，个人喜欢创建api文件对请求统一管理

1.新建api文件夹，文件夹下创建 axios.js，login.js

2. axios.js

import axios from 'axios'import router from '../router'
//引入路由是为了做重定向，比如没有登录过期定向到登录页面
// 创建axios实例
const instance = axios.create({baseURL: '', // api的base_urltimeout: 15000,                 // 请求超时时间headers: { 'content-type': 'application/json;charset=UTF-8' }
})// 拦截请求
instance.interceptors.request.use(config => {//  可以在此处添加 tokenreturn config
},error => {return Promise.reject(error)
})
// 拦截响应
instance.interceptors.response.use(res => {//可以在此处拦截接口错误return res}, error => {return Promise.reject(error)
})
export default instance复制代码

3. login.js

此文件我一般安装模块来创建多个

import instance from '@/api/axios'//引入axios文件export function loginByUsername(obj) {return instance.post(`/api/a/login`, obj)
}
export function logout() {// 退出
return instance.post(`/api/a/logout`)
}复制代码

4. login.vue

<template>
登录的实现
</template>
<script>
import { loginByUsername } from "@/api/login"
//引入api文件methods: {login(){var obj = {name:'test',password:'test'}loginByUsername(obj).then(res=>{console.log(res)})}
}
</script>复制代码

转载于:https://juejin.im/post/5ce523ede51d45508c2fb7a3

vue项目中对axios的全局封装相关推荐

在vue项目中对axios进行封装
在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...
Vue学习笔记（二）—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
在vue项目中使用axios封装axios
基本使用安装 // 项目中安装 npm install axios --S // cdn 引入 <script src="https://unpkg.com/axios/dist/a ...
超级详细的教程一步步教你Vue项目中使用axios如何进行参数拼接
文章目录一.Vue 中的网络请求二.axios的引入三.常用网络请求方式 1.get A.字符串拼接方式: B.通过params属性传递对象: C.路径拼接方式: D.无请求参数: 2.post ...
Vue项目中使用axios如何进行参数拼接
一.Vue 中的网络请求在Vue.js中发送网络请求本质还是Ajax,我们可以使用插件方便操作. ①vue-resource:Vue.js的插件,已经不维护,不推荐使用. ②axios:不是vue的 ...
在vue项目中如何定义全局变量全局函数
原文定义全局变量原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例 ...
在vue项目中定义全局变量和全局函数
如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数定义全局变量原理: 设置一个专用的的 ...

vue项目中对axios的全局封装

vue项目中对axios的全局封装相关推荐

最新文章

热门文章