网络请求库axios使用详解-简单封装

迈不过友情╰ 2023-09-28 16:44 24阅读 0赞

#### 文章目录 ####

*  axios库
 *   *  axios库的介绍
     *  axios请求方式
     *  axios基本使用
     *   *  axios基本演练
         *  配置baseURL
         *  axios创建实例
         *  axios多个请求
     *  axios请求和响应拦截
     *  axios请求库封装(简洁版)

## axios库 ##

### axios库的介绍 ###

**有了原生网络请求为什么还需要axios库**:

> 原生的AJAX和fetch, 某些功能不完善, 需要自己封装, 例如响应拦截和请求拦截, 使用起来是非常繁琐的
> 
> 于是出现了对原生网络请求封装的库, 就是axios库, 它相对原生网络请求提供了很多好用的功能, 并且axios库同时适配浏览器和Node的, 在浏览器和Node中使用axios库的API完全相同

**Vue作者推荐使用axios库**

![在这里插入图片描述][458e504be8f7430ba12ff57c04c7bafa.png_pic_center]

**axios库的功能特点**:

> axios在浏览器中发送 XMLHttpRequests 请求, 意味着axios是没有兼容性的问题的
> 
> axios在 node.js 中会自动切换发送 http请求
> 
> 支持 Promise API
> 
> 可以拦截请求和响应
> 
> 通过一些函数可以转换请求和响应数据
> 
> 等等…

**补充: axios名称的由来? 个人理解**

> axios不是一个单词, 没有具体的翻译.
> 
> 个人理解axios拆开是`ajax i/o system`: ajax 输入/输出 系统

--------------------

### 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\]\])
> 
> 当然我们开发中最常用的还是get请求和post请求

**常见的配置选项**:

> **请求地址**: url: ‘/user’
> 
> **请求类型**: method: ‘get’
> 
> **请根路径**: baseURL: ‘http://www.mt.com/api’
> 
> **请求前的数据处理**: transformRequest:\[function(data)\{\}\]
> 
> **请求后的数据处理**: transformResponse: \[function(data)\{\}\]
> 
> **自定义的请求头**: headers:\{‘x-Requested-With’:‘XMLHttpRequest’\}
> 
> **URL查询对象**: params:\{ id: 12 \}
> 
> **查询对象序列化函数**: paramsSerializer: function(params)\{\}
> 
> **请求体**: data: \{ key: ‘aa’\}
> 
> **超时时间设置**: timeout: 1000

--------------------

### axios基本使用 ###

#### axios基本演练 ####

> **安装axios: `npm install axios`**

**安装完成后, 在要发送网络请求的地方使用axios就可以发送网络请求, 由于开发中最常用的是get和post请求, 下面主要演示get和post请求的使用**

*  **通过request发送get请求**

import axios from 'axios'
    
    // request函数返回一个Promise, 当请求有结果, 内部会自动调用resolve
    axios.request({
        
      // 配置请求url地址
      url: "http://123.207.32.32:8000/home/multidata",
      // 配置请求方式, 不写默认也是get请求
      method: "get"
    }).then(res => {
        
      // 直接拿到结果是axios默认给我们返回的配置对象
      // 如果想单纯拿到服务器的数据需要 .date
      console.log(res.data)
    })

*  **request发送post请求**

import axios from 'axios'
    
    axios.request({
        
      url: "http://123.207.32.32:1888/02_param/postjson",
      method: "post",
      // 传入请求体
      data: {
        
        name: "kaisa",
        password: "aaa123"
      }
    }).then(res => {
        
      console.log(res.data)
    })

*  **通过get函数直接发送get请求**

import axios from 'axios'
    
    // get函数传入两个参数, 参数1: url地址, 参数2: 配置信息
    axios.get("http://123.207.32.32:9001/lyric", {
        
      // 传入查询字符串
      params: {
         id: 500665346 }
    }).then(res => {
        
      console.log(res.data)
    })

*  **通过post函数直接发送post请求**

import axios from 'axios'
    
    // post函数传入三个参数, 第一个url, 第二个请求体, 第三个配置信息
    axios.post("http://123.207.32.32:1888/02_param/postjson", {
        
      name: "kaisa",
      password: "aaa123"
    }).then(res => {
        
      console.log(res.data)
    })

import axios from 'axios'
    
    // post函数另一种写法
    // 第一个url, 第二个参数可以直接当成配置信息, 请求体写在配置信息的data中
    axios.post("http://123.207.32.32:1888/02_param/postjson", {
        
      name: "kaisa",
      password: "aaa123"
    }).then(res => {
        
      console.log(res.data)
    })

#### 配置baseURL ####

**我们来看这样一个例子: 在开发中我们请求的url地址其实前面都是相同的, 只是后面一部分不相同, 如下**

> 请求地址1: http://123.456.23.23:8000/home/multidata
> 
> 请求地址2: http://123.456.23.23:8000/home/data
> 
> 请求地址3: http://123.456.23.23:8000/about/data

**在每次网络请求时, 都写一遍是非常繁琐的, 我们可以通过baseURL将相同的地址抽离出去**

import axios from 'axios'
    
    // 1.抽离到baseURL变量中
    const baseURL = "http://123.207.32.32:8000"
    
    // 给axios实例配置公共的基础配置
    // 2.配置公共的请求地址baseURL
    axios.defaults.baseURL = baseURL
    // 补充: 此外还可以配置公共的 超时时间... 等等
    axios.defaults.timeout = 10000
    
    // 此时发生请求就不需要传入完整的url
    axios.get("/home/multidata").then(res => {
        
      console.log(res.data)
    })

--------------------

#### axios创建实例 ####

**我们导入的axios就是默认axios的实例, 既然有了默认的实例为什么要创建axios的实例呢?**

> `const 实例名 = axios.create({})`

> 当我们从axios模块中导入对象时, 使用的实例是默认的实例；
> 
> 当给该实例设置一些默认配置时, 这些`配置就被固定下来`了.
> 
> 但是后续开发中, 某些配置可能会不太一样, 比如某些请求需要使用特定的baseURL或者timeout等.
> 
> 这个时候, 我们就可以`创建新的实例, 并且传入属于当前实例的配置信息`.
> 
> 如果有多个不相同的配置, 我们可以创建多个实例单独为每个实例进行配置, 当需要哪一个实例, 就调用哪一个实例, 实例之间的配置信息互不影响

import axios from 'axios'
    
    // crete函数创建axios实例
    const instance1 = axios.create({
        
      // 创建axios实例可以进行公共的配置信息, 且这些配置只针对当前实例
      baseURL: "http://123.207.32.32:9001",
      timeout: 6000,
      headers: {
        }
    })
    
    // 当baseURL的请求地址不一样时, 可以再创建一个实例
    const instance2 = axios.create({
        
      baseURL: "http://123.207.32.32:8000",
      timeout: 10000
    })
    
    // 实例1发送网络请求
    instance1.get("/lyric", {
        
      params: {
        
        id: 500665346
      }
    }).then(res => {
        
      console.log(res.data)
    })
    
    // 实例2发送网络请求
    instance2.get("/home/multidata").then(res => {
        
      console.log(res.data)
    })

--------------------

#### axios多个请求 ####

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

> 使用`axios.all`, 可以放入多个请求的数组.
> 
> axios.all(\[\]) 返回的结果是一个数组，使用 axios.spread 可将数组 \[res1,res2\] 展开为 res1, res2
> 
> 当数组中的请求都有结果是, 才会返回结果

import axios from 'axios'
    
    // 同时发生多个网络请求
    axios.all([
      axios.get("/home/multidata"),
      axios.get("http://123.207.32.32:9001/lyric?id=500665346")
    ]).then(res => {
        
      console.log(res)
    })

### axios请求和响应拦截 ###

**axios的也可以设置拦截器, 通过`实例.interceptors`设置拦截器：拦截每次请求和响应**

> 请求拦截格式: `axios.interceptors.request.use(请求成功回调拦截, 请求失败回调拦截)`
> 
> 响应拦截格式: `axios.interceptors.response.use(响应成功回调拦截, 响应失败回调拦截)`

**请求拦截**

> 请求成功拦截, 会将配置信息config传给回调函数, 我们可以通过config修改当次请求的配置信息, 修改完成后我们需要将返回return config
> 
> 请求失败拦截, 会将错误信息err传给回调函数

import axios from 'axios'
    
    axios.interceptors.request((config) => {
        
      console.log("请求成功的拦截, 可以通过config修改配置信息")
      // 修改了配置信息需要再将配置信息返回出去
      return config
    }, (err) => {
        
      console.log("请求失败的拦截")
      return err
    })

**响应拦截**

> 响应成功拦截, 会将请求成功的数据传给成功的回调函数
> 
> 我们前面说过axios的请求结果, 会默认会返回一个配置对象, 响应拿到服务器的数据需要 .data 才可以获取, 其实这一转换操作, 我们可以在响应拦截中完成

axios.interceptors.response((res) => {
        
      console.log("响应成功的拦截")
      return res.data
    }, (err) => {
        
      console.log("响应失败的拦截")
      return err
    })

> 请求拦截响应拦截应用
> 
> 比如我们需要有个loading的加载动画, 可以在请求拦截中开始动画, 响应拦截中结束动画

### axios请求库封装(简洁版) ###

**axios已经非常好用, 那么我们为什么还要对axios进行封装呢**

> axios非常好用, 当我们在多个组件中需要发生网络请求的时候, 多个组件都需要导入axios实例, 再通过axios实例发送网络请求
> 
> 这样的用法是没有问题的, 但是axios毕竟是一个第三方的库, 不是官方维护的, 如果有一天axios不再进行维护了, 我们项目中使用axios的地方都需要重构, 这个工程量是非常大的, 修改起来也非常不方便
> 
> 那么解决方案是, 我们使用axios封装一个自己的request函数, 当axios真的不再维护, 我们修改代码时, 只需要修改自己封装的函数即可, 这样重构代码会非常简单

import axios from "axios";
    
    class myRequest {
        
      // 传入默认配置信息, 创建新的实例
      constructor(baseURL, timeout=10000) {
        
        this.instance = axios.create({
        
          baseURL,
          timeout
        })
      }
    
      // 1.封装request
      request(config) {
        
        // 返回一个Promise, 对数据转换
        return new Promise((reslove, reject) => {
        
          axios.request(config).then(res => {
        
            reslove(res.data)
          }).catch(err => {
        
            reject(err)
          })
        })
      }
    
      // 2.封装get
      get(config) {
        
        //  调用自己的request函数
        return this.request({
         ...config, methods: "get" })
      }
    
      // 3.封装psot
      post(config) {
        
        //  调用自己的request函数
        return this.request({
         ...config, methods: "post" })
      }
    }
    
    export default new myRequest()

[458e504be8f7430ba12ff57c04c7bafa.png_pic_center]: https://img-blog.csdnimg.cn/458e504be8f7430ba12ff57c04c7bafa.png#pic_center