为什么要二次封装axios,二次封装axios的好处有那些?
axios官网
axios是一个基于primise的网络请求库,可以方便我们进行网络请求。
二次封装的好处:便于我们更好的管理接口,不至于请求接口很多的情况下,出现混乱。
通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?那就只有找到那个页面,进去修改.整个过程很繁琐不易于项目的维护和迭代.
这个时候如果我们统一的区管理接口,需要修改某一个接口的时候直接在api里修改对应的请求是不是很方便呢?因为我们用的最多的还是get post请求.我们就可以针对封装.
一、配置步骤 (vue2)
1、创建好文件后在utils文件内创建index.js文件并在文件内配以下代码
// 导入axios
import axios from 'axios'
// 创建axios
const request = axios.create({
// 配置代理接口
// 不需要配置代理服务器的话可以直接写域名
// baseURL: 'https://www.xxx.xx',
baseURL: '/api',
// 响应时间
timeout: 3000
})
// 暴露
export default request
2、创建api文件夹,在阿皮文件下建index.js
// 导入utils文件下内index.js文件
import request from '../utils/index.js'
// 分别暴露的方式暴露内容
export const loginAPI = (loginObj) => {
// 返回请求的数据
return request({
// 配置请求方式
method: 'POST',// GET/POSH
// 请求接口地址
url: '/login',
// 要传递的参数
data: {
loginObj
}
})
}
3、配置代理服务器
在vue.config.js中配置代理服务器,用于跨域
module.exports = {
devServer: {
proxy: {
'/api': {
// 代理目标地址
target: 'http://1.116.64.64:5004/api2',
// 允许跨越
changeOrigin: true,
// 重写路径
pathRewrite: {
'^/api': ''
}
}
}
}
}
4、使用封装axios
// 引入
import { loginAPI } from '@/api'
// 使用封装后的axios发送请求
async Fn(){
const { data: { message, status, token } } = await loginAPI(要传递的参数/没参数不用传) // 将参数传到api/index.js文件内
}
二、请求拦截器配置token请求头
在api文件内index.js下配置
// 添加请求拦截器
request.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
// 通过config来添加token
config.headers.token = getToken('token')
console.log(config)
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
f.