axios拦截器封装

什么是axios？

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。axios是ajax但ajax不止axios。

开始使用之前，我们需要在项目中进行安装axios

 npm install axios

1.在项目目录中新建util文件夹，在该文件夹中新建request.js文件

项目目录如上

打开index.js文件

创建实例

import axios from "axios";//引入axios
import { Message } from "element-ui";//从element-ui中引入message组件
const instance = axios.create({baseURL: '',//公共路径可以提取到此处timeout: 10000,//过期时间，超过此事件后会出现timeoutheaders: {}//请求头，看后端接口是否要求
});

拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么if (response.data.status == 200) {//请求成功提示Message({ type: "success", message: response.data.msg });}return response;}, function (error) {// 对响应错误做点什么if (error && error.response) {//对各种响应码做提示，也可进行其它操作switch (error.response.status) {case 400:Message({ type: "error", message: "错误请求" });break;case 401:Message({ type: "error", message: "未授权，请重新登录" });break;case 403:Message({ type: "error", message: "拒绝访问" });break;case 404:Message({ type: "error", message: "未找到该资源" });break;case 405:error.message = "请求方法未允许";Message({ type: "error", message: "请求方法未允许" });break;case 408:Message({ type: "error", message: "请求超时" });break;case 500:Message({ type: "error", message: "服务器端出错" });break;case 501:Message({ type: "error", message: "网络未实现" });break;case 502:Message({ type: "error", message: "网络错误" });break;case 503:Message({ type: "error", message: "服务不可用" });break;case 504:Message({ type: "error", message: "网络超时" });break;case 505:Message({ type: "error", message: "http版本不支持该请求" });break;default:Message(`'连接错误'${error.response.status}`);}} else {Message("连接到服务器失败");}return Promise.reject(error);});

最后，将实例导出

export default instance;

以上即封装完毕，可在页面中或者api中发送请求

axios拦截器封装相关推荐

axios拦截器封装与使用
拦截器封装 import axios from "axios" // 创建axios 赋值给常量service const service = axios.create();// ...
axios 拦截器封装
1.新建文件request.js import axios from 'axios'// 创建axios实例 const service = axios.create({baseURL: proces ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装 1
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
封装axios加载动画Loding——vuex+axios拦截器
封装axios加载动画Loding--vuex+axios拦截器前言:我们在axios发送请求时候,会存在请求等待时长,我们一般会加一个动画,如果很多个时候一个一个的加动画代码看起来很臃肿很冗余,我 ...
5 拦截器拦截请求路由_手写简易版axios拦截器，实现微信小程序wx.request的封装与拦截...
前言: axios是一个功能强大的网络请求库,其中拦截器又是axios的精髓.在小程序的开发或者需要手动实现ajax的时候,没有实现对请求的拦截,开发的时候非常不方便,因此手写一个简易版的axios拦 ...
axios拦截器_78.1K 的 Axios 项目有哪些值得借鉴的地方
Axios 是一个基于 Promise 的 HTTP 客户端,同时支持浏览器和 Node.js 环境.它是一个优秀的 HTTP 客户端,被广泛地应用在大量的 Web 项目中. 由上图可知,Axios ...
vue2中使用axios，以及axios拦截器的配置
目录一.vue2项目中如何实现异步请求 1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 2.vue中的使用方法 (2)引用方法 ...
axios拦截器、ElementUI组件的使用
一.axios拦截器 1.axios模块的作用是对基于http请求的封装.在浏览器对异步请求对象XMLHttpRequest进行封装 2.拦截器 (1)请求拦截器:对客户端发起的请求进行统一的前 ...

axios拦截器封装

axios拦截器封装相关推荐

最新文章

热门文章