前端axios方法封装
时间: 2023-11-04 14:55:13 浏览: 50
axios是一个基于Promise的HTTP客户端,可以用在浏览器和Node.js环境中。在前端开发中,我们常常需要进行网络请求,为了提高代码的复用性和可维护性,我们可以将axios方法封装起来。
以下是一个简单的axios方法封装示例:
```javascript
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://api.example.com', // API请求的默认前缀
timeout: 10000 // 请求超时时间
})
// 请求拦截器
instance.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config
}, error => {
// 对请求错误做些什么
return Promise.reject(error)
})
// 响应拦截器
instance.interceptors.response.use(response => {
// 对响应数据做些什么
return response
}, error => {
// 对响应错误做些什么
return Promise.reject(error)
})
export default {
// 封装get方法
get(url, params) {
return new Promise((resolve, reject) => {
instance.get(url, {
params: params
}).then(response => {
resolve(response.data)
}).catch(error => {
reject(error)
})
})
},
// 封装post方法
post(url, data) {
return new Promise((resolve, reject) => {
instance.post(url, data).then(response => {
resolve(response.data)
}).catch(error => {
reject(error)
})
})
}
}
```
在上面的代码中,我们使用axios.create()方法创建了一个axios实例,设置了请求的默认前缀和超时时间,然后定义了请求拦截器和响应拦截器,用来在请求发送前和响应返回后进行一些公共的处理。最后,我们封装了get和post方法,用来发送get和post请求,并返回一个Promise对象。
使用方法如下:
```javascript
import http from './http'
// 发送get请求
http.get('/user', { id: 1 }).then(data => {
console.log(data)
}).catch(error => {
console.log(error)
})
// 发送post请求
http.post('/login', { username: 'admin', password: '123456' }).then(data => {
console.log(data)
}).catch(error => {
console.log(error)
})
```
这样,我们就可以在项目中方便地调用封装好的axios方法,而且也方便维护和修改。