vue axios封装及使用

在实际开发过程中axios的使用前一般都会封装一下，方便全项目使用，以下一个简单的axios封装的实例

serve.js

一个简单的axios封装

import axios from 'axios'
import { Message } from 'element-ui'
import router from './router'// 创建实例
const axiosInstance = axios.create({// 请求域名baseURL: 'xxx', // 设置超时时间timeout: 1000 * 30,// 请求头headers: {'Content-Type': 'application/json'}
})// 请求拦截器
axiosInstance.interceptors.request.use(config => {const token = 'xxx' // 登录后生成用于识别用户身份，项目不需要直接去掉config.headers['Authorization'] = token || ''return config},error => {console.error('error: ', error)Promise.reject(error)}
)// 响应拦截器
axiosInstance.interceptors.response.use((response) => {if (response.status === 200) { //根据后端定义响应状态进行相应的处理,例：1数据返回成功，2未登录if (response.data && response.data.code === 2) { // router.push({ name: '登录'})} else if (response.data && response.data.code !== 1) {Message.error(response.data.msg)  // 数据异常提示}return response.data} else {//数据异常处理Message.info(JSON.stringify(response.status)) return response.data}},(error) => {return Promise.reject(error)}
)export default axiosInstance

api.js

封装的所有接口请求

import serve from './serve 'export const login = (params) => serve.post('/api/login', params)
export const getUser = (params) => serve.get('/api/userInfo', { params })

index.vue

页面调用

<template><div class="container">登录页</div>
</template><script>
import { login } form './api'export default {created(){const params = {aaa: 'xxxxxx',bbb: 'xxxxxx'}login(params).then((res) => {console.log(res)})}
}
</script>

vue axios封装及使用相关推荐

vue axios封装获取微信公众号用户的openid
目录 axios封装 openid vue vue+ts axios封装一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios, 创建axios实例: axios.crea ...
vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档安装 npm install axios npm install es ...
axios post body参数_Vue开发中的一些问题（axios封装）
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
vue+axios方法封装(restful,ajax)
this.$get({url: '',data: {},success: (data) => {}}) import qs from 'qs'// axios网络请求 function ajax ...
vue中将axios封装
在平时写项目中,经常会遇到组件调用同一个接口或者不同接口 import axios from "axios"axios({url: "https://autumnfish ...
vue如何封装请求接口方法
vue如何封装请求接口方法方法一首先创建一个server.js文件引入axios和qs //引入axios和qs插件 import axios from 'axios' import qs fr ...
vue+element 封装公共js代码
一.多个 js 方法,不想用 vue.prototype 二.使用Vue.prototype 封装公共 js 三.封装的方法较多,又想通过this.直接调用一.多个 js 方法,不想用 vue.pr ...
axios 登录后设置header,vue+axios 全局添加请求头和参数操作
vue+axios 全局添加请求头和参数操作走登录的接口都会返回一个 token 值, 然后存起来方便之后调接口的时候给后台传过去, 传给后台的方式有两种:(具体使用哪种需要和后台商量) 1, 放在 ...

vue axios封装及使用

在实际开发过程中axios的使用前一般都会封装一下，方便全项目使用，以下一个简单的axios封装的实例

serve.js

api.js

index.vue

vue axios封装及使用相关推荐

最新文章

热门文章