《axios的简单封装》

在开发中，我们经常需要与后端进行数据交互，而 axios 是一个非常流行的基于 Promise 的 HTTP 库。为了提高代码的可维护性和复用性，对 axios 进行简单的封装是一种很好的解决方案。

一、解决跨域问题和统一配置

我们可以创建一个 http.js 文件来封装 axios。解决跨域问题以及设置一些通用的基础配置，如基础URL等。

javascript
import axios from 'axios';</p>

<p>// 创建axios实例
const service = axios.create({
    baseURL: 'https://api.example.com', // 基础url，根据实际情况修改
    timeout: 5000, // 请求超时时间
});</p>

<p>export default service;

这样，在项目中使用时就不用每次都写基础url了，并且如果要更换基础url，只需要在这个文件里修改一处即可。

二、请求和响应

（一）请求

可以在请求发送之前做一些处理，例如添加token到请求头中。

javascript
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token'); // 假设token存储在localStorage中
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);


（二）响应

当收到响应时可以对数据进行预处理，像判断状态码是否正常等。

javascript
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data;
if (res.code !== 200) { // 假设200是成功的状态码
Message.error(res.message || 'Error');
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
// 对响应错误做些什么
console.log('err' + error); // for debug
Message.error(error.message);
return Promise.reject(error);
}
);


三、定义封装后的请求方法

为了更方便地发起不同类型的请求，我们可以定义一些常用的请求方法。

javascript
// get请求
export function fetchGet(url, params = {}) {
    return new Promise((resolve, reject) => {
        service.get(url, {
            params
        }).then(response => {
            resolve(response.data);
        }).catch(error => {
            reject(error);
        })
    });
}</p>

<p>// post请求
export function fetchPost(url, data = {}) {
    return new Promise((resolve, reject) => {
        service.post(url, data).then(response => {
            resolve(response.data);
        }).catch(error => {
            reject(error);
        })
    });
}

通过以上几种思路对axios进行简单的封装，可以使我们的前端项目在进行网络请求时更加简洁、高效并且易于维护。

// 来源：https://www.nzw6.com