渐进式研究Vue中axios的封装——原理探索

zhuanbike 2022-3-15 788

axios在实际项目中的封装有哪几种方法?这里通过四种方法封装了vue的axios,我们可以更好的理解其中的原理:当然,这是简单的原理,更深的原理我们需要Promise 再到js底层,然后还要具备原生ajax的了解。

封装代码: 

import axios from "axios"
//封装方法1 需要传入三个参数
export function request(config, success, fail) {
    axios({ url: config })
        .then(res => success(res))
        .catch(err => fail(err)
        )
}
//封装方法2 传入一个参数对象
export function request2(config2) {
    axios.defaults.baseURL = "http://localhost:8082/usr/";
    axios(config2.url)
        .then(
            res =>config2.success(res)
        )
        .catch(
            err => config2.fail(err)
        )
}
//封装方法3 使用返回promis的方法 接近原生
export function request3(config3){
    let newVar=axios.create(
        {
         baseURL:"http://localhost:8082/usr/" ,
         timeout:3000
        }
    );
    return new Promise((res,rej)=>{
        newVar(config3).then(res1=>res(res1)).catch(err=>rej(err))
    }
    )
}
//方法4 推荐使用的方法 简单明了
export function request4(config4){
    let newAxios=axios.create(
        {
         baseURL:"http://localhost:8083/usr/" ,
         timeout:3000
        }
    );
    return newAxios(config4);
}

调用代码:

import {request,request2,request3,request4} from './http/request'

//调动封装好的axios1
request('http://localhost:8081', res=>console.log(res), err=>console.log('封装请求失败'+err));
//方式2请求
request2({
url:'xxxx/n1',
successs:res=>console.log(res),
fail:err=>console.log(err+'封装方法2数据请求超时')
})
//方法3请求方法
request3({
  url:'xxxx/sc123'
}).then(res=>console.log(res)).catch(err=>console.log("方式3请求超时"+err))
//方法4调用
request4({ url:'xxxx/sc123'}).then(res=>console.log(res)).catch(err=>console.log("方式4请求超时"+err))
最新回复 (0)
发新帖