在工作中我们经常使用一些js库来提高我们的开发效率，axios库在工作中经常用于发送请求,使用它之后我们发送请求可以通过向axios传递相关配置来发送请求，也可以使用它挂载在自身上的别名来进行发送请求
//传递配置调用 axios({ method:"post", url:"/login", data:{} }) //使用别名进行调用 axios.get("/fred",{data:{}}) axios.post("/login",{data:{}})
这种方式在开发过程中十分灵活，我们来实现一下axios对象的创建过程
首先声明一个Axios构造函数，接收一个参数config，这个参数是进行初始配置的，同时也声明一个拦截器，这个拦截器中有一个响应拦截器还有一个请求拦截器
// 接收一个配置对象参数 function Axios(config) { // 初始化配置 this.config = config; // axios拦截器 this.intercepters = { //请求拦截器 request: {}, //响应拦截器 response: {} } }
我们在把对应的请求方法，放到Axios这个构造函数的原型上，便于节省内存，在原型上声明三个方法，这三个方法都接收一个配置对象，但是POST方法和GET方法里面的配置对象需要使用原生中的Object.assign进行合并参数，防止进行误传操作
// 原型添加上相应的方法 Axios.prototype = { // 请求方法 request(config={}) { console.log('request请求', config.method); }, // get请求方法 get(config={}) { this.request(Object.assign(config, { method: 'GET' })) }, // post请求方法 post(config={}) { this.request(Object.assign(config, { method: 'POST' })) } }
我们来创建使用一下,来看一下是否能够调用到对应的方法
const axios= new Axios(); axios.get() //request请求，GET axios.post() //request请求，POST
目前这样子我们还不能通过axios(config)的方式去调用，所以我们通过声明一个函数来实现
// 声明函数 function createInstance(config={}){ //实例化一个axios对象 const CONTEXT=new Axios(config); // 创建一个请求函数，将axios构造函数原型上的request方法通过bind改变当前this并返回一个新的方法,这里我们可以当成一个函数进行使用，而不能当成一个对象进行使用 const INSTANCE=Axios.prototype.request.bind(this) // 所以我们这里需要将Axios构造函数原型上的方法遍历添加到INSTANCE中 // 函数调用的时候，this有可能不会指向当前实例这里，这里我们就用bind进行修改，这样保证调用方法就在这个实例对象上 Object.keys(Axios.prototype).forEach(key=>(INSTANCE[key]=Axios.prototype[key].bind(CONTEXT))) // 这个时候INSTANCE身上没有初始化配置对象config和拦截器对象intercepters,这个时候就需要将实例身上的方法克隆到INSTANCE身上 Object.keys(CONTEXT).forEach(key => (INSTANCE[key] = CONTEXT[key])) //最后在把处理过后的数据返回出去 return INSTANCE; }
我们做好之后来使用一下，看一下axios调用是否可以通过对象的方式发送和通过对象别名的的方式进行发送
// 创建一个axios对象 const axios = createInstance(); // 发送get请求 axios({ method: 'GET' })//request请求 GET // 发送post请求 axios.post()//request请求 POST
这样子，我们就实现了手写创建axios对象
代码我已经放在码上掘金上了，想学习的大家可以看一下！
坚持努力，无惧未来！
