vueaxios封装

 

Vue是一种流行的前端框架，能够帮助我们构建单页面应用程序。而Axios是一个基于Promise的HTTP库，用于发送异步HTTP请求。在Vue中使用Axios可以方便地与后端进行交互，获取数据并更新页面。

 

但直接在Vue组件中使用Axios可能会导致代码重复和混乱，因此我们可以将Axios进行封装，以便我们可以在整个应用程序中重复使用封装后的Axios实例，并且能够统一处理错误和添加请求拦截器等操作。

 

下面是我写的一个简单的Vue-Axios封装，以便方便地在项目中使用：

 

```javascript

// api.js

import axios from "axios";

 

// 创建一个新的Axios实例

const instance = axios.create({

baseURL: "https://api.example.com"

 

timeout: 10000

 

});

 

// 添加请求拦截器

instance.interceptors.request.use(

(config) => {

// 在请求发送之前做一些处理，比如添加请求头

config.headers["Authorization"] = "Bearer " + localStorage.getItem("token");

return config;

}

 

(error) => {

return Promise.reject(error);

}

);

 

// 添加响应拦截器

instance.interceptors.response.use(

(response) => {

// 在响应返回之后做一些处理

return response.data;

}

 

(error) => {

// 在请求出错时做一些处理

if (error.response) {

// 处理错误码，例如401 Unauthorized时跳转到登录页

if (error.response.status === 401) {

router.push("/login");

}

}

return Promise.reject(error);

}

);

 

export default instance;

```

 

上述代码是一个简单的Axios封装示例，其中我们创建了一个新的Axios实例，并添加了请求拦截器和响应拦截器。在请求拦截器中，我们可以在每个请求发送前做一些处理，比如添加请求头、设置token等。在响应拦截器中，我们可以在接收到响应后做一些处理，比如获取响应数据、处理错误等。

 

使用封装后的Axios实例非常简单，只需要在需要发送请求的地方导入`api.js`文件，然后使用`instance`进行请求即可：

 

```javascript

// 在Vue组件中发送请求

import api from "./api.js";

 

export default {

methods: {

fetchData() {

api.get("/data").then((response) => {

// 处理接收到的数据

console.log(response);

}).catch((error) => {

// 处理请求错误

console.error(error);

});

}

 

}

 

};

```

 

在上述代码中，我们导入了`api.js`文件并使用`api.get("/data")`发送了一个GET请求，然后使用`.then()`处理接收到的数据，`.catch()`处理请求错误。

 

通过封装Axios，我们可以方便地发送HTTP请求，并能够统一处理错误和添加请求拦截器等操作，从而提高代码的可维护性和可读性。