vue 在axios请求post接口时怎样捕获状态码和返回数据
时间: 2023-10-09 12:16:16 浏览: 978
在 Vue 中使用 axios 发送 POST 请求时,可以通过 Promise 的方式获取接口响应状态码和返回数据。具体实现如下:
```javascript
axios.post('/api/login', {
username: 'admin',
password: '123456'
}).then(response => {
// 获取接口响应状态码
const status = response.status;
// 获取接口返回数据
const data = response.data;
}).catch(error => {
// 如果接口请求失败,则处理异常情况
console.log(error);
});
```
在上述代码中,我们通过 axios.post 方法发送 POST 请求,并通过 Promise 的 then 方法获取接口响应状态码和返回数据。如果接口请求失败,则通过 catch 方法捕获异常情况。
需要注意的是,axios 的 then 和 catch 方法都是异步执行的,因此需要在 then 方法中获取接口响应状态码和返回数据,不能在 axios.post 方法后立即获取。
相关问题
vue封装axios请求
在Vue中使用axios进行网络请求是非常常见的。我们可以对axios进行封装来方便地在Vue中使用。这里提供一个例子,包括axios的安装、请求拦截器、设置请求超时时间以及post请求头的设置。
首先,我们需要安装axios,可以通过npm install axios命令来进行安装。后,我们可以在Vue项目中的main.js文件中引入axios,并且将其挂载到Vue原型上,这样在组件中就可以通过this.$http来进行访问。接下来,我们可以封装一个request函数,封装axios的请求拦截器、设置请求超时时间以及post请求头的设置。
下面是一个简单的封装axios请求的例子:
1. 安装axios
```
npm install axios
```
2. 在main.js中引入axios并挂载到Vue原型上
```
import axios from 'axios'
Vue.prototype.$http = axios
```
3. 封装request函数
```
import axios from 'axios'
import store from '@/store/index'
// 创建axios实例
const service = axios.create({
timeout: 10000 // 请求超时时间
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 每次发送请求之前判断vuex中是否存在token
// 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
const token = store.state.token
token && (config.headers.Authorization = token)
return config
},
error => {
return Promise.error(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response.data)
} else {
return Promise.reject(response)
}
},
error => {
// 服务器返回不是 2 开头的情况,会进入这个回调
// 可以根据后台返回的状态码进行不同的操作
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
})
break
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期,请重新登录',
duration: 1000,
forbidClick: true
})
// 清除token
localStorage.removeItem('token')
store.commit('loginSuccess', null)
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
})
}, 1000)
break
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
})
break
// 其他错误,直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
})
}
return Promise.reject(error.response)
}
}
)
export default service
```
4. 在组件中使用request函数
```
import request from '@/utils/request'
// 发送get请求
request.get(url, params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// 发送post请求
request.post(url, data).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
```
--相关问题--:
vue2封装axios接口请求二次封装
Vue2封装Axios接口请求的二次封装可以让我们在项目中更加方便地使用Axios进行数据请求,同时也可以提高代码的可维护性和复用性。下面是一个简单的Vue2封装Axios接口请求的示例:
1. 安装Axios
在项目中安装Axios,可以使用npm或者yarn进行安装:
```bash
npm install axios --save
```
或者
```bash
yarn add axios
```
2. 封装Axios
在src目录下新建一个api文件夹,用于存放Axios的封装代码。在api目录下新建一个request.js文件,用于封装Axios的请求方法。
```javascript
import axios from 'axios'
// 创建实例
const service = axios.create({
baseURL: process.env.BASE_URL, // 接口的基础路径
timeout: 5000 // 请求超时时间
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在请求发送之前做一些处理,比如添加token等
return config
},
error => {
// 请求错误时做些事
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做一些处理,比如说判断返回的状态码是否正确等
return response.data
},
error => {
// 响应错误时做些事
return Promise.reject(error)
}
)
export default service
```
在上面的代码中,我们使用了Axios的interceptors来拦截请求和响应,并做一些处理。比如说,在请求拦截器中,我们可以在发送请求之前添加token等信息;在响应拦截器中,我们可以对返回的数据进行处理,判断响应状态码是否正确等。
3. 封装API请求
在api目录下新建一个index.js文件,用于封装API请求的方法。我们可以根据实际的业务需求,封装不同的请求方法。
```javascript
import request from './request'
export function getUsers () {
return request({
url: '/users',
method: 'get'
})
}
export function getUserById (id) {
return request({
url: `/users/${id}`,
method: 'get'
})
}
export function createUser (data) {
return request({
url: '/users',
method: 'post',
data
})
}
// 其他API请求方法...
```
在上面的代码中,我们使用了封装的request方法来发送请求,同时根据业务需求,定义了不同的请求方法,比如获取用户列表、根据ID获取用户信息、创建用户等。
4. 使用API请求
在Vue组件中使用API请求非常简单,只需要在组件中引入封装的API请求,然后调用对应的方法即可。
```javascript
import { getUsers } from '@/api'
export default {
mounted () {
this.getUsers()
},
methods: {
async getUsers () {
const { data } = await getUsers()
console.log(data)
}
}
}
```
在上面的代码中,我们在组件中引入了封装的getUsers方法,并在mounted钩子函数中调用该方法来获取用户列表,并将返回的数据打印到控制台上。
这样,我们就完成了Vue2封装Axios接口请求的二次封装。通过对Axios进行二次封装,我们可以更加方便地使用Axios进行数据请求,并且也可以提高代码的可维护性和复用性。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)