创建对应的axios实例,意思是一个axios实例对应一个接口地址，如果这个接口地址下有多条路径，就可以直接调用这个实例去请求，相同的信息抽象到这个实例里！

案例：

/*
 * axios实例
**/

const crmeb = axios.create({
    baseurl: 'https://store.crmeb.net/api/pc',
    timeout: 5000
})

crmeb({
    url: '/get_products',
    params: {
        page: 1,
        limit: 20,
        cid: 57,
        sid: 0,
        priceorder: '', 
        news: 0,
    }
}).then(res => {
    console.log(res)
})

crmeb({
    url: '/get_company_info',
}).then(res => {
    console.log(res)
})


// coderwhy

const coderwhy = axios.create({
    baseurl: 'http://123.207.32.32:8000',
    timeout: 5000
})

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

coderwhy({
    url: '/category'
}).then(res => {
    console.log(res)
})

主要是用来抽取公共逻辑到一个配置文件里，对这些公共逻辑做一个封装，即使某一天这个axios框架不维护了，或者出现了重大bug也不再修复的时候，我们可以只修改配置文件即可达到全局修改的目的，如果把每次请求逻辑都写到对应的组件中，那修改起来简直就是一个噩梦！

抽取网络请求公共配置

一般是在项目的src目录下创建一个network文件夹，新建一个request.js文件，以后所有发送网络请求只面向这一个文件！

封装方法一（回调法）：

// network/request.js

import axios from 'axios'

// 这里没有使用default导出，是为了方便以后扩展，可以导出多个方法
// 知识点：default导出只能导出一个
export function request(config, success, failure){
    // 1. 创建axios实例
    const instance = axios.create({
        baseurl: 'https://store.crmeb.net/api/pc',
        timeout: 5000
    })

    // 这里发送请求，但是还牵扯到调用结果，不会吧数据在这里展示
    // 因此，还需要想办法将数据导出去，异常也得导出去
    instance(config)
        // 将数据回调出去的办法是，在request方法中传入一个获取请求成功和
        // 失败的回调参数success和failure，这两个参数都必须是函数
        .then(res => {
            // 请求成功的回调函数success()
            success(res)
        })
        .catch(res => {
            // 请求失败的回调函数success()
            failure(res)
        })
}

如何使用

例如我们现在要用在项目的main.js文件中，如下所示:

/*
 * 调用封装一个request模块
**/


// 引入request方法
import {request} from "./network/request"  

request({
    url: '/get_products',
    params: {
        page: 1,
        limit: 20,
        cid: 57,
        sid: 0,
        priceorder: '', 
        news: 0,
    }
}, res => {
    // res箭头函数对应request方法中的success参数
    // 返回请求到的数据
    console.log(res)
}, err => {
    // err箭头函数对应request方法中的failure参数
    // 返回错误信息
    console.log(err)
})

封装方法二(回调法)：

这个封装方法与第一个思路是一致的，只是将请求数据封装进了一个basconfig对象，对外暴露了两个回调函数封装到config当中！

// network/request_b.js

import axios from 'axios'

export function request_b(config){
    // 1. 创建axios实例
    const instance = axios.create({
        baseurl: 'https://store.crmeb.net/api/pc',
        timeout: 5000
    })
	// 发送请求，axios的相关请求参数在baseconfig中定义
    instance(config.baseconfig)
        .then(res => {
            // 请求成功的回调函数success()
            config.success(res)
        })
        .catch(res => {
            // 请求失败的回调函数success()
            config.failure(res)
        })
}

使用

/*
 * 封装一个request_b模块
**/

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

request_b({
    baseconfig: {
        url: '/get_company_info',
    },
    success: function (res) {
        console.log(res)
    },
    failure: function (err) {
        console.log(err)
    }
})

终极封装方案

采用new一个promise对象的方法去封装！

// network/request_promise.js

import axios from 'axios'

export function request_promise(config) {
    return new promise((resolve, reject) => {
        // 1. 创建axios实例
        const instance = axios.create({
            baseurl: 'https://store.crmeb.net/api/pc',
            timeout: 5000
        })

        // 2. 发送真正的网络请求
        instance(config)
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            })

    })
}

但是，其实axios的实例就是一个promise对象，那么我们就没有必要自己再去new一个promise，直接将其return返回即可！

export function request_promise(config) {
        // 1. 创建axios实例
        const instance = axios.create({
            baseurl: 'https://store.crmeb.net/api/pc',
            timeout: 5000
        })

        // 2. 发送真正的网络请求
        return instance(config)

}

使用

/*
 * 封装一个request_promise模块
**/
import { request_promise } from "./network/request_promise"

request_promise({
    url: '/get_company_info',
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})