- 安装axios库：在项目中使用npm安装axios。可以使用以下命令进行安装：
npm i axios -S
-
在src目录下创建一个新的文件夹（例如utils），并在其中创建一个名为request.js的文件。
-
在request.js中导入axios库，并创建一个新的axios实例：
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000 // 请求超时时间
})
-
在新建的axios实例中可以设置一些默认值，例如baseURL和timeout等。其中，baseURL是我们请求的基础路径，timeout是我们设置的请求超时时间。
-
在request.js中可以设置一些请求和响应拦截器：
service.interceptors.request.use(
config => {
// 在请求发送之前做些什么
return config
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
// 对响应数据做些什么
return response.data
},
error => {
// 对响应错误做些什么
return Promise.reject(error)
}
)
在请求拦截器中，我们可以在请求发送之前设置一些参数，例如请求头信息、Token等，以及格式化请求参数。
在响应拦截器中，我们可以对响应数据进行一些处理，例如格式化响应数据、统一处理异常等。
- 导出新建的axios实例：
export default service
- 在Vue组件中导入已封装的axios实例，并使用它来发送请求：
import request from '@/utils/request'
request({
url: '/user/login',
method: 'post',
data: {
username: 'admin',
password: '123456'
}
}).then(response => {
console.log(response)
})
在这个例子中，我们使用request这个实例来向服务器发出登录请求。
通过以上步骤，我们可以把axios封装到业务模块中，方便复用。同时，我们可以通过拦截器对请求和响应进行处理，使得代码结构更加清晰，逻辑更加严谨。
