vue 封装axios请求
时间: 2023-08-21 11:04:55 浏览: 55
在Vue中封装axios请求可以通过以下步骤实现:
1. 创建一个`request.js`文件来封装axios。在这个文件中,你可以将axios的各种配置项进行设置,比如设置baseURL、设置请求拦截器和响应拦截器等。这样,调用`request.js`相当于调用axios,并且还可以添加一些额外的配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue对Axios网络请求进行封装](https://blog.csdn.net/qq_47188967/article/details/129447379)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关问题
vue封装axios请求 代码举例说明
非常感谢您的提问!下面是一个基于Vue封装Axios请求的示例代码:
```javascript
import axios from 'axios'
import { Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
baseURL: 'http://api.example.com',
timeout: 5000 // 请求超时时间
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前添加一些请求头参数
config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')
return config
},
error => {
// 处理请求错误
console.log(error)
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 处理响应数据
const res = response.data
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
// 处理响应错误
console.log(error)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
// 封装请求方法
const request = {
get(url, params) {
return service({
method: 'get',
url,
params
})
},
post(url, data) {
return service({
method: 'post',
url,
data
})
},
put(url, data) {
return service({
method: 'put',
url,
data
})
},
delete(url) {
return service({
method: 'delete',
url
})
}
}
export default request
```
当然,对于不同的项目和需求,具体的封装方式也可能会有所不同。希望这段代码能够帮助您进一步理解Vue中如何封装Axios请求。
vue封装axios请求并且如何在页面中使用请举例说明
好的,关于封装 axios 请求,我可以给您提供一种常见的做法。我们可以先定义一个 axios 实例,然后统一配置一些请求拦截、响应拦截等操作,并导出一个封装好的函数,供我们在页面中调用。
具体示例如下:
```
import axios from 'axios'
import Vue from 'vue'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 10000, // 请求超时时间
headers: {
'Content-Type': 'application/json'
}
})
// 请求拦截器
service.interceptors.request.use(config => {
// 在请求发送之前可以对请求做一些处理
return config
}, error => {
// 对请求错误做些什么
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response => {
// 对响应数据做些什么
return response
}, error => {
// 对响应错误做些什么
return Promise.reject(error)
})
// 封装的请求函数
export function request(url, method, params) {
return new Promise((resolve, reject) => {
service({
url,
method,
data: method === 'post' ? params : null,
params: method === 'get' ? params : null
}).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
}
```
上面的代码中,我们定义了一个 `service` 实例用于网络请求,然后在 `axios.interceptors` 中定义了一些拦截器,其中 `request` 拦截器用于在请求发送前对请求进行一些处理,`response` 拦截器用于对响应数据进行一些处理。
最后,我们定义了一个封装好的请求函数 `request`,接收三个参数,分别为请求的 URL、请求的方法、请求的参数。在页面中使用时,只需调用 `request(url, method, params)` 即可发送网络请求。
示例:
```
import { request } from '@/utils/request'
request('/api/user', 'get', { userId: 1 }).then(res => {
console.log('请求成功:', res.data)
}).catch(error => {
console.log('请求失败:', error)
})
```
以上就是一个简单的封装 axios 请求的过程,希望能对您有所帮助。