1、处理并发请求
4. 提一下直接导入组件和按需导入组件的差别
第一种，直接 import axiosBase from "@/components/axiosBase.vue"; ，然后注册在components中，它是始终都会挂在上面的，不管有没有用到。
代码
这种的话就会根据是否使用到了，才会导入，更加的优化了性能。
代码
4.1. axios.all方法处理并发请求
有的时候，可能需要同时发送两个请求，需要两个结果都返回了在进行数据处理
axios提供了一个方法帮我们处理并发请求，使用方法和propmise的all方法使用类似
axios.all([
axios.get("https://jsonplaceholder.typicode.com/posts"),
axios.post("https://jsonplaceholder.typicode.com/posts")
]).then( res => {
console.log(res);
})
但是promise的功能存在一个问题，那就是 必须二个都为true返回的才会执行 .then 方法，否则便会走 .catch 中去。
4.2 因此axios.all方法的问题
axios的all方法和promise的all方法都有一个致命的缺点，就是一旦有一个请求出现错误，那么整个请求都会出现错误。
但是axios的all方法比promise的好处就是，正常来说，服务器都是连接正常，如果没有请求到数据也会返回成功的请求。
就算没有拿到数据，本地和服务器之间的连接也是成功的，只不过服务器返回的是 其实数据获取错误信息并不是数据
4.3.1 同样axios提供了一个spread方法把数据从数组中取出来
axios.all([
axios.get("https://jsonplaceholder.typicode.com/posts"),
axios.post("https://jsonplaceholder.typicode.com/posts")
]).then(axios.spread( res1 , res2 ){
//通过axios的spread方法取出数据
console.log(res1);
console.log(res2);
})
4.3.1 或者在axios中使用解构去取值
axios.all([
axios.get("https://jsonplaceholder.typicode.com/posts"),
axios.post("https://jsonplaceholder.typicode.com/posts")])
.then((resutl1,resutl2]) =>{
// 通过解构取数据
console.log(resutl1);
console.log(resutl2);
})
4.4 axios的请求配置
下面的这些是创建请求时可以用的配置选项，只有url是必须的，如果没有指定method，请求将默认使用get方法。
{
// url 是用于请求的服务器 URL
url ：'/user',
// method 是创建请求时使用的方法
method：'get', //默认请求的方式
// baseURL 将自动加在 url 前面，除非 url 是一个绝对URL
// 它可以通过设置一个 baseURL 便于为axios 实例的方法传递相对 URL
baseURL：'https://some-domain.com/api/',
// params 是即将与请求一起发送的 URL 参数
// 必须是一个格式化对象 或 URLSearchParams对象
params：{
id：1
}，
//data是作为请求主体被发送的数据
// 只适用于这些请求方法 'put' , 'post' , 和 'patch'
// 在没有设置 transformRequest 时，必须是以下类型之一：
// string，plain object，ArrayBuffer，ArrayBufferView，URLSearchParams
// 浏览器专属：FormData，File，Blob
// Node专属：Stream
data：{
userName：'xiaoming'
}，
// proxy 定义代理服务器的主机名称和端口
// auth表示HTTP基础验证应当用于连接代理，并提供凭据
// 这将会设置一个 Proxy-Authorization 头，覆写掉已有的通过使用 header 设置的自定义
proxy：{
host：'127.0.0.1'，
port：9000，
auth：{
userName：'小陈'，
password：123456
}
}
// transformRequest 允许在向服务器发送前，修改请求数据
// 只能用在 'put' , 'post' , 'patch' 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或ArrayButter，或 Stream
transformRequest：[ function( data , headers) {
//对data进行任意转换处理
return data；
}]，
// transformResponse 在传递给 then/catch 前，允许修改响应数据
// 对 data 进行任意转换处理
transformResponse: [function (data) {
return data;
}],
// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间，请求将被中断
timeout: 1000,
}
4.5 常用配置示例
axios.all([
axios({
baseURL:"https://jsonplaceholder.typicode.com" ,
url: "/posts",
}),
axios({
baseURL:"https://jsonplaceholder.typicode.com" ,
url:"/posts/1"
})
]).then( axios.spread((resutl1,resutl2) => {
// 通过axios的spread方法取出数据
console.log(resutl1);
console.log(resutl2);
}）
)
2、axios实例
2.1 为什么要创建axios实例
随着项目的复杂度的提升，需要的数据量就会越来越多，出于服务器性能的考虑，可能会将数据部署在堕胎服务器上，此时单单只配置一个全局baseURL已经没法满足我们的需求。
此时需要的是使用axios实例，分别配置对于不同服务器数据的请求。
2.2 创建axios实例对象
axios提供了create的方法去创建对象
// config为当前实例的配置对象
const instance = axios.create(config);
2.3 axios实例的展示
通过创建axios向不同的服务器获取数据
测试一：
代码
获取的数据
测试二：
代码
获取的数据
3、axios的封装
3.1 封装axios的原因
1. 如果不封装axios，就在所有需要数据库的组件中通过axios发送请求。
2. 如果未来需要更换请求的第三方库，就需要更换所有导入axios库的组件。
3. 如果axios请求出现了问题，需要调整，就需要在所有使用了axios的组件中进行调整，不利于后期的维护。
因此需要对axios进行封装，这样所有需要发送请求的组件都只要使用我们封装的模块就行了，后期调整只需要修改我们封装过的模块即可。
3.2 封装axios
代码
网友评论