如何将Vue Axios封装及API统一管理方法改写为长尾关键词？

本文共计446个文字，预计阅读时间需要2分钟。

在Vue项目中，频繁与后端交互时，常用axios请求数据。axios是基于promise的HTTP库，可在浏览器端和node.js中运行。项目规模扩大，接口请求也会增多。

在vue项目中，每次和后台交互的时候，经常用到的就是axios请求数据，它是基于promise的localhost:5001/api' } export default base

3.接口统一管理,每一个js文件都对应一个功能请求接口管理，在下面实现get,post的实例请求，并且引入qs序列化的处理，使用之前先安装qs

安装qs

cnpm install qs --save

　　3.1:更加模块化管理

　　3.2:更方便多人开发，有效减少解决命名冲突

　　3.3:处理接口域名有多个情况

import axios from '../untils/http' import QS from 'qs' import base from './base' /** * post方法，对应post请求 * @desc注册请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ export function userRejister(data) { return axios({ url: `${base.url}/users/register`, method: 'post', data: QS.stringify(data) }) } /** * get方法，对应get请求 * @desc登录请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ export function userInfo() { return axios({ url: `${base.url}/profile/all`, method: 'get' }) }

4.使用。以上工作做完之后，只需要在我们需要发送请求接口的文件，引入

本实例中引入案例

import { userRejister} from "../../untils/user.js";

发送请求axios请求

async submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { //发送请求return new Promise((resolve, reject) => { userRejister(this.registerUser) .then(response => { console.log(response); resolve(); }) .catch(error => { reject(error); }); }); } else { console.log("error submit!!"); return false; } }); },

总结

以上所述是小编给大家介绍的vue axios封装及API统一管理的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！