web前端入门到实战：Vue项目中使用Axios封装http请求

最新推荐文章于 2025-12-03 19:03:48 发布

原创

最新推荐文章于 2025-12-03 19:03:48 发布 · 2.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #web前端 #前端开发

本文介绍了如何在Vue项目中使用Axios进行http请求的封装，包括安装Axios，创建http.js文件，设置请求和响应拦截器，以及封装get和post方法。通过拦截器，可以统一处理请求错误和状态码，实现如请求超时、携带token等功能。在实际应用中，可以在main.js中引入并方便地在组件中调用封装后的请求方法。

使用axios可以统一做请求响应拦截，例如请求响应时我们拦截响应信息，判断状态码，从而弹出报错信息。请求超时的时候断开请求，还可以很方便地使用then或者catch来处理请求。

安装

npm install axios --save

建立http.js文件

在/src/utils/目录下建立一个htttp.js

1.首先导入axios和router。

import axios from 'axios';
import router from '../router';

2.接着设置axios请求参数。

axios.defaults.timeout = 5000; //请求超时5秒
axios.defaults.baseURL ='';  //请求base url
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //设置post请求是的header信息

如果你要用到session验证码功能，让请求携带cookie，可以加上以下一行：

axios.defaults.withCredentials = true

3.然后，我们要给请求加个拦截器，就是在请求即将发送之前，我们需要给请求添加信息，比如下面的代码中，我们给请求添加header信息，header中添加token，这样每次请求都会在header中携带token信息。这在我们的接口开发中经常用到。

//http request 拦截器
axios.interceptors.request.use(
  config => {
    let token = sessionStorage.getItem('token')
    if (token) {  // 判断是

最低0.47元/天解锁文章