Axios是怎么做封装的？

流程： 下载 创建实例 接着封装请求响应拦截器，抛出，最后封装接口

---

axios

为什么要封装axios呢？

• 弥补原生框架上的不足
• 理解成本低
• 保持原有的功能

我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。

Axios封装

// 1.引入axios
import axios from 'axios'

// 2.创建实例
const api=axios.create({
  // 请求地址的公共部分
  baseURL:'',
  // 请求的超时事件
  timeout:3000
})
// 3.axios拦截器
// 请求拦截器
axios.interceptors.request.use(config=>{
  // config 请求的信息
  return config
},err=>{
  // 抛出错误
  Promise.reject(err)
})
// 响应拦截器
axios.interceptors.response.use(res=>{
  // res 拿到的一些信息
  console.log(res)
  return Promise.resolve(res)
},err=>{
  // 抛出错误
  Promise.reject(err)
})
// 返回api
export default api

接口封装

request.js

//引入封装好的axios文件
import api from './axios'

// 封装接口
export const login=()=>api({
  url:'',
  // url 接口地址
  method:'get',
  // method请求方式
  params:params
  // params携带参数可选的
})

使用接口

vue文件

<template>
  <div>login</div>
  <button @click="loginHandel">登录</button>
</template>
<script>
// 引入封装好的接口文件
import {login} from './request'
export default{
  name:'login',
  data(){
    return{

    }
  },
  methods:{
    loginHandel(){
      // 调用登录接口
      login().then(res=>{
      console.log(res)
    })
    }
  }
}
</script>

总结

封装的比较少，一些关于状态码和一些别的处理都没有进行封装，阅读本文存在不同想法时，可以在评论中表达，如果更多的需求，或者说是不一样的需求，可以根据自己的需求进行一个改进。后续有时间再更新吧！！！！

• 封装是编程语言中多态之一，简单对axios封装，就可以体会到它带来的无限魅力。
• 根据项目的需求进行封装，且简单易用，那就是一个好的方案。

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见