什么是axios?为什么要封装?又怎么优雅的进行封装呢?这是我刚开始接触前端学习axios的疑惑，直到现在已经能炉火纯青的去封装属于我自己的axios方法了！！！其实也不是一件多难的事情，也是给大家稍微整理一下其中的步骤，希望能给大家一些帮助。
那么先来解释一下开头提到的这几个问题
什么是axios?
简单的说axios就是一个用于浏览器和Node.js环境中发送请求功能强大，用于处理前后端数据交互的库，在写项目中相信大部分都是用axios来进行数据请求的吧！
为什么要封装?
封装axios的原因：
- 简化重复性的代码：在项目里我们都会有统一的baseURL、headers等，而axios提供了拦截器，我们可以在拦截器中对一些相同代码重复性的代码集中管理这样做提高了代码的可读性和维护性。
- 处理响应的逻辑：可以在请求拦截器或者响应拦截器进行一些逻辑操作，例如后端返回的状态码，我们需要对不同的状态码进行不同的提示语句那么我们可以在响应拦截器中进行一些逻辑操作
也许还有很多很多原因，这里就先讲两个个人觉得比较重要也是深有体会的原因哈哈哈哈！
怎么优雅的进行封装呢?
我们在项目中需要安装axios：npm install axios
通常情况下，我们的项目中会有一个utils文件夹存放一个request.js (个人写法) 来对axios进行封装，会先创建axios实例配置baseUrl等信息。注意在正式的开发中，我们一般会分为测试环境和生产环境所以baseUrl我们需要根据当前环境来设置，这个地方详细可以进入主页阅读关于前端配置的文章噢
// utils/request.js
import axios from 'axios'
const http = axios.create({
baseURL:'http://api.com' // 请求后端接口的baseurl
timeout:100000 // 设置请求的超时时间
})
export default http
创建了一个'http'的axios实例之后我们就封装一下get/post等请求方法
// utils/request.js
import axios from 'axios'
const http = axios.create({
baseURL:'http://api.com' // 请求后端接口的baseurl
timeout:100000 // 设置请求的超时时间
})
export function get(url,params){
return http.get(url,{params})
}
export function post(url,data){
return http.post(url,{data})
}
export default http
接着我们可以使用拦截器来处理请求和响应，比如在请求之前我们需要添加token或者请求头等
// utils/request.js
import axios from 'axios'
const http = axios.create({
baseURL:'http://api.com' // 请求后端接口的baseurl
timeout:100000 // 设置请求的超时时间
})
// 请求拦截器
http.interceptors.request.use(config=>{
// 例如
config.headers.Authorization = `Bearer ${引入token}`
return config
},
err=>{
return Promise.reject(err)
})
// 响应拦截器
http.interceptors.response.use(response=>{
return response
},
err=>{
return Promise.reject(err)
})
export function get(url,params){
return http.get(url,{params})
}
export function post(url,data){
return http.post(url,{data})
}
export default http
封装完之后我们在项目中有一个专门写接口的文件夹api导入我们封装好的http方法 例如要写登录接口
// api/login.js
import http from '@/utils/request
// 登录方法
export function login(url,data){
return http.post(url,{data})
}
组件中使用
// home.vue
import { login } from '@api/login'
login('/login',{
username:'cc',
password:'*****'
})
以上就是封装axios的一些简单的步骤，希望能跟各位大佬们一起讨论交流！！
