Axios 是什么?
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
特性
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
基础用法
引入之后直接使用，不做任何配置
import axios from 'axios'; // 向给定ID的用户发起请求 axios.get('/user?ID=12345') .then((response) => { // 处理成功情况 console.log(response); }) .catch((error) => { // 处理错误情况 console.log(error); })
常规用法
一般我们在项目中使用都会统一的配置接口的baseUrl，超时时间等等
import axios from 'axios'; const _axios = axios.create({ baseUrl: 'http://localhost:9333/api', timeout: 1000 * 15, })
配置请求拦截器
在请求拦截器中可以做一些常规配置，比如要给请求头添加token或附加一些特殊的共有数据等等
_axios.interceptors.request.use(config=>{ // 添加token config.headers.token = 'token'; // do something },error=>Promise.reject(error))
配置返回拦截器
在请求拦截器中可以做一些常规配置，比如要给请求头添加token或附加一些特殊的共有数据等等
_axios.interceptors.response.use(config=>{ // do something },error=>{ // 做一些统一的错误处理 // 401 需要授权 // 404 接口不存在 // 405 请求方式不允许，本来接口是get的而你使用了post // 等等 })
取消重复请求
在项目中会经常碰到一个按钮连续多次的快速点击，这样就会在极短的时间内请求多次，实际上我们只需要一次返回结果就可以，这个时候就可以取消之前多次的重复提交。
在此我们会用到 axios.CancelToken 这个方法，具体使用方法可以查看文档
封装取消请求的方法
class CancelToken { constructor() { this.store = new Map(); } add (config) { const key = this.getKey(config); new axios.CancelToken((cancel) => { if (this.store.has(key)) { this.remove(config) } this.store.set(key, cancel); }); } remove (config) { const key = this.getKey(config); if (this.store.has(key)) { let cancel = this.store.get(key); cancel(key); this.store.delete(key); } } // 根据请求参数获取唯一的key getKey(config){ const { method, url, params, data } = config; return [method, url, params, data].join('-'); } }
使用CancelToken方法
const cancelToken = new CancelToken(); // 请求拦截器 axios.interceptors.request.use(config=>{ cancelToken.add(config); },error=>Promise.reject(error)) // 接收拦截器 axios.interceptors.response.use( response => { const config = response.config; cancelToken.remove(config) Promise.resolve(response) }, error => { return Promise.reject(error); } );
至此，axios的常规使用就介绍完了，感谢各位的阅读。
