30.axios的封装

为什么要对框架进行封装

我们在进行网络请求的时候，可以在每个页面引入axios，然后通过它发送网络请求，但是这样做的话，对框架就太过于依赖了，假如有一天这个框架不在维护，而你的项目中右100个页面都是通过引入框架发送的请求的话，那么你就去厕所哭吧😎，所以，我们需要想办法对这个框架进行一层封装，然后所有需要发送网络请求的页面都来引入我封装好的代码，这样如果出问题了，我只需要改我封装的代码就好了👍

如何对框架进行封装

首先，我们创建一个network的文件夹，里面新建一个request.js的文件，我们封装的代码就写在这里面；
然后，我们在request文件中的代码如下：

• 第一种封装方式：

import axios from 'axios';

export function request(config, success, failure) {
    const instance = axios.create({
        baseURL: 'https:api.github.com',
        timeout: 1000
    });
    instance(config)
    .then(res => {
        success(res)
    })
    .catch(err => {
        failure(err)
    })
}

• 调用方法：

request({
      url: '/users'
    }, res => {
      console.log(res)
    })

• 第二种封装方式：将config看成一个对象

export function request(config) {
    const instance = axios.create({
        baseURL: 'https:api.github.com',
        timeout: 1000
    });
    instance(config.baseConfig)
    .then(res => {
        config.success(res)
    })
    .catch(err => {
        config.failure(err)
    })
}

• 调用方式：

request({
      baseConfig: {
        url: '/users'
      },
      success(res) {
        console.log(res)
      }
    })

• 第三种封装方式：promise的方式

export function request(config) {
    return new Promise((request, reject) => {
        const instance = axios.create({
            baseURL: 'https:api.github.com',
            timeout: 1000
        });
        instance(config)
            .then(res => {
                request(res)
            })
            .catch(err => {
                reject(err)
            })
    })
}

• 调用方式：

request({
      url: '/users'
    }).then(res => {
      console.log(res)
    })

• 第四种封装方式：promise简写，因为实例的axios返回的就是一个promise对象

export function request(config) {
    const instance = axios.create({
        baseURL: 'https:api.github.com',
        timeout: 1000
    });
    
    return instance(config)

}

• 调用方式：

request({
      url: '/users'
    }).then(res => {
      console.log(res)
    })