Axios网络模块详解

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

程海灿烂，愿你归来仍是是少年
学习无它法，唯有持之以恒

前端技术学习交流群：686160287

Axios官方定义：

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

为什么选择Axios

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);
})

axios提供的拦截器

提供拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理。
注意：在请求拦截中传入config配置对象的时候，切记最后要return config ，否则是获取不到数据的。

拦截器中都做什么呢?

请求拦截可以做到的事情:

响应拦截中完成的事情：

• 响应的成功拦截中，主要是对数据进行过滤
  

• 响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。