Vue项目中如何使用Axios封装http请求详解

使用Axios进行http请求可以帮助我们快速的开发Vue项目，Axios支持浏览器、node.js和可以异步的进程通信。在Vue项目中，我们可以封装Axios进行http请求，以便于让我们的代码更加集中和易于维护。

下面就是Vue项目中如何使用Axios封装http请求的详细攻略：

1. 安装Axios

首先，在Vue项目中使用Axios，需要进行安装。运行以下命令即可安装Axios：

npm install axios --save

2. 封装Axios

在Vue项目中封装Axios，一般可以新建一个http.js文件来进行封装。

以下是一个常用的Axios封装的示例：

import axios from 'axios';
import { Message } from 'element-ui';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // process.env.BASE_API
  timeout: 5000 // 请求超时时间
});

// request拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;

    // 如果返回的状态码不是20000，则认为有错误
    if (res.code !== 20000) {
      Message({
        message: res.message || 'error',
        type: 'error',
        duration: 5 * 1000
      });

      // 50008: 非法的token; 50012: 其他客户端登录了; 50014: Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 请自行在引入 MessageBox
        // import { Message, MessageBox } from 'element-ui'
        MessageBox.confirm('你已经注销，可以取消以留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload(); // 为了重新实例化vue-router对象 避免bug
          });
        });
      }
      return Promise.reject('error');
    } else {
      return response.data;
    }
  },
  error => {
    console.log('err' + error); // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

export default service;

3. 使用Axios封装进行http请求

在Vue项目中，我们可以直接引用封装好的Axios进行http请求，如下所示：

import request from '@/utils/request';

export function login(username, password) {
  return request({
    url: '/user/login',
    method: 'post',
    data: {
      username,
      password
    }
  });
}

以上代码是一个使用Axios封装进行登录请求的示例，其中使用了封装好的request方法来发起http请求。

类似的，我们也可以封装其他常用的http请求方式，如get、post、put、delete等。

4. 示例说明1：使用Axios进行异步请求数据

以下是一个异步请求数据的示例：

// 请求用户信息
getUserInfo() {
  this.loading = true
  axios.get('/getUserInfo')
      .then(res => {
          console.log('用户信息：', res)
          this.userInfo = res.data.data
          this.loading = false
      })
      .catch(err => {
          console.error('获取用户信息失败：', err)
          this.loading = false
      })
}

5. 示例说明2：使用Axios进行post请求

以下是一个使用Axios进行post请求的示例：

axios.post('/login', {
  username: 'foo',
  password: 'bar'
})
.then(response => {
  console.log(response);
})
.catch(error => {
  console.log(error);
});

以上就是使用Axios封装http请求的攻略了，通过这种方式能够使Vue项目开发更加方便和高效。