Axios interceptor 无效 axios use

转载

mob6454cc65e0f6 2024-05-04 16:19:19

文章标签 前端 vue.js javascript ios 数组 文章分类 iOS 移动开发

本篇文章中讲述的主要是Axios基本概念以及常见的使用方式。
将在下篇文章中介绍在实际的项目(Vue项目为例)中如何规范的使用Axios请求数据

Axios官方定义：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
名字的由来个人理解：
	axios: ajax i/o system

Vue作者尤大大推荐：

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
等等

Axios的下载方式很简单这里不再赘述，我们直接看如何使用

Axios的请求方式

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

基本使用方式

在vue文件中举个例子：

import axios from 'axios'
export default {
	name: 'app',
	created() {
		axios.get('/api/goodsDetail', 
			{params: {type: 'sell', page:1}})
			.then(res => {
				console.log(res);
			})
			.catch(err => {
				console.log(err);
			})
	}
}

发送并发请求

有时候, 我们可能需求同时发送两个请求：

使用axios.all, 可以放入多个请求的数组。
axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组[res1,res2] 展开为 res1, res2。

import axios from 'axios'
export default {
	name: 'app',
	created() {
		axios.all([axios.get('/api/goodsCategory'),
					axios.get('/api/goodsDetail', {params: {type: 'sell', page: 1}})])
		.then(axios.spread(res1, res2) => {
			console.log(res1);
			console.log(res2);
		})
	}
}

重点来了，在实际的项目开发中我们不会像上面那样使用，为什么：

在每个组件中都那样去用Axios请求数据，试想有一天这个第三方包不再维护或者被淘汰出现了bug，在维护项目替换掉它时会带来很大的困难。
在实际项目中我们前端拿到的接口可能不是来自同一个url地址，我们需要对其进行配置。
开发过程中很多参数都是固定的，代码冗余，不优雅。同样需要对其配置。

全局配置

在上面的示例中有一个问题, 我们的BaseURL是固定的

事实上, 在开发中可能很多参数都是固定的.
这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

axios.default.baseURL = 'http://123.207.30.30:3000';

axios的实例

为什么要创建axios的实例呢？

当我们从axios模块中导入对象时, 使用的实例是默认的实例.
当给该实例设置一些默认配置时, 这些配置就被固定下来了.
但是后续开发中, 某些配置可能会不太一样.
比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息

//创建新的实例
const axiosInstance = axios.create({
	baseURL: 'http://123.207.30.30:3000',
	timeOut: 5000,
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded'
	}
})

//发送网络请求
axiosInstance({
	url: '/category',
	method: 'get'
})
.then(res => {
	console.log(res);
})
.then(err=> {
	console.log(err);
})