axios的使用

本篇博客简要讲述本人在前端vue开发过程中对于axios的理解

文章目录

axios的使用
前言
一、axios是什么？
二、使用步骤
- 1.引入库
- 2.axios使用
- - 1，引用axios后直接设置配置，这种配置方式会影响到所有的接口，本人在目前实习阶段就是采用这种写法较多
  - 2，第二种方法就是实例化一个axios对象，这个方法主要的好处就是创建多个axios，一部分接口用一部分axios,属性也都可以设置
  - 注意点：
  - axios请求拦截器
  - axios响应拦截器

前言

作为一个刚刚出门的小实习生，在我现有的开发生涯中，前端网络数据请求上我就使用过vue-resource,axios。在学校学习时使用vue2x接触到的vue-resource，开始实习后接触到axios。然后就一直使用axios，在接触到多个项目后,想要对axios做一个小小的总结,便于以后更灵活地使用。

一、axios是什么？

在axios之前，vue使用的是vue-resource，我目前知道的vue-resource被替代的原因是不在进行维护和更新。本人也没有使用vue-resource的拦截器和请求器。
Axios是一个基于Promise的Http库(可以实现异步)，用在浏览器端和NodeJS 的异步通信框架。
前端通信大部分都是基于XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。

                                  Axios功能特点

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API【JS中链式编程】
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF（跨站请求伪造）

二、使用步骤

1.引入库

代码如下（示例）：

npm axios from 'axios'

安装完毕后可以在main.js中引入，也可以在axios.js中直接使用。我目前使用的方式为urls.js中写接口的路径，axios.js中写拦截器的逻辑，对请求做一些设置。token处理，在api.js中调用axios，urls完成接口的实现。

axios在使用时不需要use，主要原因时axios并不同于主要供给vue使用的模块，axios是通用化ajax库，这种库可以用vue.prototype继承方法，然后this调用。

2.axios使用

先创建axios实例，创建axios实例的方法多种多样

1，引用axios后直接设置配置，这种配置方式会影响到所有的接口，本人在目前实习阶段就是采用这种写法较多

这里我是将所有的接口地址都写在urls.js下，这里的baseURL可以根据生产环境配置

if(process.env.NODE_ENV === 'development') {baseURL = 'xxx本地环境xxx';
} else if(process.env.NODE_ENV === 'production') {baseURL = 'xxx生产环境xxx';
}

npm axios from 'axios'
// 携带Cookie
axios.defaults.baseURL = urls.BASE_URL
axios.defaults.withCredentials = true
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
// 默认Post请求使用 application/json 形式
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.timeout = 10000

2，第二种方法就是实例化一个axios对象，这个方法主要的好处就是创建多个axios，一部分接口用一部分axios,属性也都可以设置

let newAxios = axios.create({baseURL: 'xxxxx',timeout: 1000, withCredentials:true

在第二种的基础上可以针对个别接口进行设置

instance.get('/xxx',{timeout: 5000
})

注意点：

axios的配置，以及请求拦截器，是对请求体的一个封装，设置多种多样。请求中需要的都可以进行设置，例如处理一些数据流。在进行图片下载，excel下载的时候非常关键。

axios请求拦截器

这个时候拦截下来的请求还没有发出，在这个是时候我们可以对这个请求进行各种操作，高级一点的拦截器，还可以根据请求发出的一些信息，进行过滤。例如，一些接口需要token或者其他的登录信息。往往会在后端进行验证，但是在程序请求量非常大的时候，可以在前端进行验证，请求中没有的必要信息的时候进行拦截。

axios.interceptors.request.use(res => {// 封装请求...return res
}, err => {// 请求出现错误时回调return Promise.reject(err)
})

axios响应拦截器

//
axios.interceptors.reponse.use(res => {// 对结果数据进行操作return res
}, err => {//接口处理错误return Promise.reject(err)
})

注意：这里的接口错误是接口请求出现错误。有时需要在数据结构操作逻辑里进行错误判断。以及进行错误信息的弹出，例如code为401等错误信息。

// 响应拦截器
axios.interceptors.response.use(res => {// console.log(res)if (res.config && !res.config.headers.Authorization && res.config.url.endsWith(urls.common.LOGIN)) {tokenHelper.setToken(res.headers.authorization)}if (res.data.code != 200) {if (res.data.code == 401) {ElMessage.error(res.data.msg || '登录状态失效，请重新登录')router.push('/')} else if (res.data.msg) {ElMessage.error(res.data.msg)}return Promise.reject(res.data)}if (res.data.total || res.data.total == 0) {//分页接口使用时更为方便，少写一个datareturn {data: res.data.data,total: res.data.total}} else {return res.data.data}},

axios的使用（请求，响应拦截器）相关推荐

Axios的Vue插件（添加全局请求/响应拦截器）
/** * @file Axios的Vue插件(添加全局请求/响应拦截器) */ // https://github.com/mzabriskie/axios import axios from ...
Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
axios 请求拦截器响应拦截器
一. 拦截器介绍一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
axios 最全请求拦截器响应拦截器配置公共请求头超时时间以及get delete post put 四种请求传参方式
axios 拦截器请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操 ...
axios请求拦截器、响应拦截器、vue-router路由导航守卫的使用(案例)
axios官方文档一.请求拦截器设置headers,给所有请求加上Authorization:token值二.响应拦截器直接去访问/article,发现可以进入到article内容管理页面原 ...
axios拦截器_请求拦截器_响应拦截器---axios工作笔记010
然后我们再去看看axios的,请求拦截器,和响应拦截器. 先说一下这个,拦截器的原理,其实就是我们发送一个请求,这个请求在发出去之前,我们的请求拦截器,先去拦截一下,拦截的时候可以对请求数据做一些处 ...
如何使用 Axios 中的请求拦截器和响应拦截器
Axios 是一个常用的 JavaScript 库,用于发送 HTTP 请求和处理响应.在网站设计中,我们可以使用 Axios 请求拦截器和响应拦截器来实现一些常见的需求,例如添加认证信息.处理错误信 ...
axios请求拦截器和响应拦截器
请求拦截器 1. 发送axios请求被 axios中then 处理前拦截的请求 2. 发送axios请求在axios内then ,将axios向服务器发送的请求数据进行拦截作用: 可以将axio ...
axios（5）——请求拦截器和响应拦截器
1.axios访问流程 axios发送请求→axios请求拦截器→服务器→axios响应拦截器→then方法处理响应结果 2.使用代码讲解 <!DOCTYPE html> <html ...

axios的使用（请求，响应拦截器）