详解vue中axios的使用与封装

Vue.js是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序（SPA）。Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js中发送异步HTTP请求。在Vue.js项目中，Axios常用于与后端进行数据交互。本文主要介绍如何在Vue项目中使用Axios，并展示如何进行封装以简化HTTP请求。 Axios的安装非常简单。可以通过npm命令来安装。在命令行中输入以下命令即可： ```bash npm install axios --save ``` 接下来，创建一个专门的文件夹和服务文件。通常，会在项目的src目录下新建一个名为service的文件夹，并在其中创建一个index.js文件来存放封装好的Axios服务。 ```javascript // service/index.js import axios from 'axios'; import { Toast } from 'mint-ui'; // 使用mint-ui框架进行提示信息的展示，实际使用中可替换为其他UI框架或方式。 import router from '../router'; // 引入Vue Router以便进行页面跳转。 // 设置默认的请求超时时间和基础URL。 axios.defaults.timeout = 50000; axios.defaults.baseURL = ''; // 设置请求拦截器，用于统一处理请求前的配置，如添加token等。 axios.interceptors.request.use(config => { // 获取本地存储中的token值。 const token = localStorage.getItem('cc_token'); // 如果headers中没有'Content-Type'，设置默认为'application/json'。 if (!config.headers['Content-Type']) { config.headers = { 'Content-Type': 'application/json', }; } // 如果存在token，将其添加到请求头中。 if (token) { config.headers.token = token; } // 根据请求类型对参数进行处理。 if (config.method === 'get') { // 对get请求中的params进行一些处理。 config.params = config.params || {}; let json = JSON.parse(JSON.stringify(config.params)); // ...处理json } else { // 对非get请求中的data进行一些处理。 config.data = config.data || {}; // ...处理config.data } return config; }, err => { return Promise.reject(err); }); // 设置响应拦截器，用于统一处理请求返回结果。 axios.interceptors.response.use(response => { // 对返回的状态码进行判断。 if (response.data.code === 501) { // 如果返回501状态码，说明需要进行登录验证。 // 跳转到登录页面，并记录当前页面的跳转路径。 router.push({ name: 'login', query: { retUrl: window.location.href.split('#')[1] || '', is_new_user_url: 1, }, }); } return response; }, error => { return Promise.reject(error); }); ``` 在封装了请求和响应拦截器之后，我们就可以使用Axios来发起GET和POST请求了。以下是一个封装GET请求的示例： ```javascript /** * 封装GET请求方法 * @param {string} url 请求的URL * @param {object} params 请求参数 * @returns {Promise} 返回一个Promise对象 */ export function fetch(url, params = {}) { return new Promise((resolve, reject) => { axios.get(url, { params: params }) .then(response => { // 如果后端返回的状态码为200，表示请求成功。 if (response.data.code === 200) { resolve(response.data.data); // 成功处理，这里可以根据项目需求进行定制。 } else { // 如果请求失败，则显示错误提示。 Toast(response.data.msg); } }) .catch(err => { reject(err); let message = '请求失败！请检查网络'; // 如果存在响应信息，则优先使用响应的错误信息。 if (err.response) { message = err.response.data.message; } Toast(message); }); }); } ``` 同样地，也可以封装POST请求： ```javascript /** * 封装POST请求方法 * @param {string} url 请求的URL * @param {object} data 请求的参数体 * @returns {Promise} 返回一个Promise对象 */ export function post(url, data = {}) { return new Promise((resolve, reject) => { axios.post(url, data) .then(response => { if (response.data.code === 200) { resolve(response.data.data); // 成功处理，这里可以根据项目需求进行定制。 } else { // 处理请求失败的情况。 Toast(response.data.msg); } }) .catch(err => { reject(err); let message = '请求失败！请检查网络'; if (err.response) { message = err.response.data.message; } Toast(message); }); }); } ``` 通过上面的方法，我们已经实现了一个简单的Axios请求封装，可以轻松地在Vue项目中发起HTTP请求。这样的封装使得代码更加清晰，也方便了后续的维护和功能扩展。开发者可以根据自己的需求，在拦截器中加入更多的通用逻辑，如错误处理、日志记录、请求缓存等。