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