Linux基础操作二：Linux系统介绍-CFANZ编程社区

Linux基础操作二：Linux系统介绍

安装axios：首先，在项目中安装axios库。可以使用npm或者yarn进行安装。
```
npm install axios
```
创建封装文件：在src目录下创建一个api文件夹，并在该文件夹下创建一个request.js文件。

在request.js文件中，引入axios库和Vue：

import axios from 'axios';
import Vue from 'vue';

创建一个axios实例，并设置一些默认配置：

const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
});

添加请求拦截器：我们可以在发送请求之前对请求进行拦截，添加一些通用的请求头信息等。

instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'Bearer ' + getToken(); // 示例：给请求头添加身份验证信息
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

添加响应拦截器：我们可以在接收到响应之后对响应进行拦截，处理一些公共的错误信息等。

instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    return response.data;
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

封装具体的请求方法：根据项目需求，可以封装常用的GET、POST等请求方法。

export const get = (url, params) => {
  return instance.get(url, { params });
};

export const post = (url, data) => {
  return instance.post(url, data);
};

在main.js文件中引入request.js，并将其挂载到Vue原型上：
```
import request from './api/request';

Vue.prototype.$http = request;
```

在组件中使用封装后的请求方法：

export default {
  methods: {
    fetchData() {
      this.$http.get('/api/data', { params: { id: 1 } }).then((response) => {
        // 处理返回的数据
      }).catch((error) => {
        // 处理请求错误
      });
    },
  },
};

0 条评论