本篇共 5136 字

axios实例及合理封装请求配置文件

作者:admin   分类:前端   发布:6 月前   阅读量:1   浏览量:1

创建对应的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)
})
标签: vue axios
本篇共 0 条评论

留言内容:

还没有任何评论!

还没有登陆,请登录后发表评论!