简单的封装axios 不包含状态码和提示

复杂封装，包含提示和状态码的，点击这里查看

以下是简单封装axios的request.js文件：

import axios from 'axios'
import router from './../router'
import { Message } from 'element-ui'// 设置axios全局默认的BASE-URL， 只要设置了全局的默认base_url，以后的请求会自动拼接上base_url
// -------------------------------注意改成自己的公共url------------------------------------
axios.defaults.baseURL = 'http://192.168.1.194/gateway'
axios.defaults.timeout = 10000// 配置axios的请求拦截器-(每次在请求头上携带后台分配的token-后台判断token是否有效等问题)
axios.interceptors.request.use(config => {// 在发送请求之前做些什么// console.log('请求到了哟', config.headers.Authorization)// 如果有其他的特殊配置 只需要判断config参数 设置即可// 标识系统为AJAX请求config.headers['X-Requested-With'] = 'XMLHttpRequest'// 统一的给config设置 token-------------------------------注意获取方法------------------------------------//   config.headers.Authorization = JSON.parse(localStorage.getItem('token'))config.headers['Token'] = '3d2eec53c6f74f43a85e8df083d9bf84'return config
}, error => {// 对请求错误做些什么return Promise.reject(error)
}
)// 响应拦截器 与后端定义状态是100时候是错误 跳转到登录界面
axios.interceptors.response.use(response => {// 对响应数据做点什么console.log('接口success', response)// 当返回信息为未登录或者登录失效的时候重定向为登录页面if (response.data.status == 100 ||response.data.message == '用户未登录或登录超时，请登录！') {localStorage.removeItem('token')router.push({path: '/login',querry: { } // 从哪个页面跳转})Message.warning(response.data.message)}return response.data
}, error => {console.log('接口error', error)// 对响应错误做点什么return Promise.reject(error)
}
)const $http = {}$http.get = function(url, data, config) {//  这一步把api方法里的  地址 参数 配置传入进来 配置到config 然后调用上面封装的axiosconfig = config || {}config.url = urlconfig.method = 'get'config.params = datareturn axios.request(config)
}$http.delete = function(url, data, config) {config = config || {}config.url = urlconfig.method = 'delete'config.params = datareturn axios.request(config)
}$http.post = function(url, data, config) {config = config || {}config.url = urlconfig.method = 'post'config.data = datareturn axios.request(config)
}$http.put = function(url, data, config) {config = config || {}config.url = urlconfig.method = 'put'config.data = datareturn axios.request(config)
}export { axios, $http }

简单的封装axios 不包含状态码和提示相关推荐

使用TS+vue3封装axios时编译报错，提示You may need an additional loader to handle the result of these loaders.
基于vue3+TS构建的商城后台管理系统根据coderwhy老师指导搭建的项目为PC端商品后台管理系统. 报错: 使用TS+vue3封装axios时编译报错,提示You may need an ad ...
ajax的get/post请求及其封装，以及ajaxHTTP状态码是啥子意思
ajax的get/post请求及其封装,以及ajax/HTTP状态码是啥子意思 ajax是什么? AJAX即"Asynchronous Javascript And XML"(异步 ...
axios post 400 状态码
1.400状态码 400的主要有两种形式: (1).bad request意思是"错误的请求": (2).invalid hostname意思是"不存在的域名" ...
服务器状态304,解析304状态码错误提示的原因与解决304错误提示的方法
对于第304页的错误,一直是SEO工作人员老生常谈的话题.初始网站管理员对304错误非常敏感.互联网上总是有与之相关的新闻,比如:大量的304状态码会在网站上被降级,但这是真的吗? 一.304错误提示 ...
http状态码304缓存机制(强缓存和协商缓存-304)
前言:好久没写博客了,今天早上闲着没事重新看了下http的304缓存机制.下面我就简单的讲下我的理解吧. 描述:首先我们先明白一点什么是状态码.对于我们开发来说,大家一说起http状态码,都能随口说几 ...
HTTP的303、307状态码
之前在<http权威指南>中看到了HTTP的307状态码,当时因为没有找到可以实验的网站所以没有比较深的印象,今天在排查一个问题的时候恰巧遇到了HTTP/1.1 307 Temporary ...
php 获取header_php 输出404状态码
今天在做一个php数据提交的小功能时,需要在判断一个值是如果为空时,就让后台的逻辑页面返回 404 状态码,提示用户页面不存在.那么接下来,飞鸟慕鱼博客要说的是 php 如何返回或输出 html 40 ...
vue项目中简单进行axios封装及响应状态码提示！
import Vue from 'vue'import axios from 'axios' import { Toast,Indicator,MessageBox } from 'mint-ui'; ...
axios请求失败，response.data返回的状态码及错误信息获取
axios请求失败,后端接口返回的状态码及错误信息获取使用封装的elementUI后台框架,后台框架自定义封装并返回的code码转态(全部的返回数据,如下所示): 浏览器查看:返回的 error 信 ...

简单的封装axios 不包含状态码和提示

简单的封装axios 不包含状态码和提示相关推荐

最新文章

热门文章