axios 相关知识

记录自己的学习过程，方便自己以后查阅学习，如果有相同问题的，能帮助你们是更好的，侵权可删！

----itchao 2021年3月26日13:08:26

一、jsonp 相关知识

在前端开发中，常见的网络请求方式就是 JSONP

使用 JSONP 最主要的原因是为了解决跨域访问的问题.

JSONP 的原理是什么呢？

JSNOP 的核心在于通过
原因是我们的项目部署在 domain1.com 服务器上时，是不能直接访问 domain2.com 服务器上的资料的.
这个时候，我们利用
所以，封装 jsonp 的核心就在于我们监听 window 上的 jsonp 进行回调的名称.

二、为什么选择 axios?

作者推荐！

功能特点：

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

三、axios 框架的基本使用

1 下载安装 axios
2 导入 axios
3 使用 axios

axios({
    url:'http:xxxxx.xxxx.xxx'  //  默认是 get 请求
}).then(res =>{
    console.log(res);
})

axios({
    url:'http:xxxxx.xxxx.xxx',    //  默认是 get 请求
    params:{
        type:'pop',
        page:1
    }
}).then(res =>{
    console.log(res);
})

四、axios 发送并发请求

当需要同时发送两个请求时：

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

axios.all([axios({
    url:'http://xxx/xx/xxx'
}),axios({
    url:'http://yyy/y/yyyy',
    params:{
        type:'sell',
        page:5
    }
})]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

五、axios 的配置信息相关

5.1 全局配置

开发中可能许多参数都是固定的.
这个时候我们可以进行一些抽取，也可以利用axios 的全局配置.

关键字 defaults

axios.defaults.baseURL = '123.11.11.23:8080'
axios.defaults.timeout = 5000

5.4 常见的配置选项

请求地址
请求类型（默认是 get 请求）
请求根路径
请求前的数据处理
请求后的数据处理
自定义的请求头
URL 查询对象
查询对象序列化函数
request body（请求类型为post时，传入data）
超时设置 s
跨域是否带 Token
自定义请求处理
身份验证信息
响应的数据格式 json/blob/document/arratbuffer/text/stream
等等（还有其他很多信息，需要的时候自己再去查）

六、axios 的实例和模块封装

6.1 创建对应的 axios 的实例

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

从 axios 模块中导入对象时，使用的实例是默认的实例
给该实例设置一些默认配置时，这些配置就被固定了
在后续开发中，某些配置可能不一样，不能使用全局的配置，需要各自独立的配置
这个时候，可以创建新的实例，并且传入属于实例的配置信息（独立，特殊的配置信息）

const instance1 = axios.create({
    baseURL:'http:xxxx//111.22.22.16:8080',
    timeout:5000
})

instance1({
    url:'/home/multidata'
}).then(res => {
    console.log(res);
})

instance1({
    url:'/home/data',
    params:{
        type:'pop',
        page:1
    }
})

6.2 模块封装

采用Promise进行模块封装
创建一个 network 文件夹，里面创建一个 request.js
下面代码是放在 request.js 里面

import axios 'axios'

export function request(config){
    return new Promise((resolve, reject) => {
        //  1.创建 axios 的实例
        const instance = axios.create({
            baseURL:'http://222.22.23.34:8080',
            timeout:5000
        })
        
        //  发送真正的网络请求
        instance(config)
        .then(res => {
            resolve(res)
        })
        .catch(err => {
            reject(err)
        })
    })
}

下面代码是放在引用的代码里

import {request} from "./network/request"

request({
    url:'/home/xqwxsa'
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

七、axios 的拦截器的使用

axios 提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理。

7.1 请求拦截的作用：

比如 config 中的一些信息不符合服务器的要求
比如每次发送网络请求时，都希望在界面中显示一个请求的图表
某些网络请求（比如登陆（token））, 必须携带一些特殊的信息

instance.interceptors.request.use(config => {
    console.log(config);
    return config
},err => {
    console.log(err);
})

7.2 响应拦截的作用

instance.interceptors.response.use(res => {
    console.log(res);
    return res.data
}, err => {
    console.log(err);
})