在 vue 项目中, 每次和后台交互的时候, 经常用到的就是 axios 请求数据, 它是基于 promise 的 http 库, 可运行在浏览器端和 node.JS 中. 当项目越来越大的时候, 接口的请求也会越来越多, 怎么去管理这些接口? 多人合作怎么处理? 只有合理的规划, 才能方便往后的维护以及修改,
安装
安装 axios 依赖包
cnpm install axios --save
引入
一般会我会在项目 src 中新建一个 untils 目录, 其中 base 用于管理接口域名, http 处理请求拦截和响应拦截, user.JS 负责接口文件 (接口文件可以自己新建一个文件夹, 然后放对应的接口文件)
1. 在 http.JS 文件中, 用于处理 axios 中对请求拦截和响应拦截做处理, token 处理, 并引入 element-ui 加载动画.
- import axios from 'axios'
- import { Loading, Message } from 'element-ui'
- import router from '../router/index.js'
- let loading
- function startLoading() {
- loading = Loading.service({
- lock: true,
- text: '加载中....',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- }
- function endLoading() {
- loading.close()
- }
- // 请求拦截
- axios.interceptors.request.use(
- (confing) => {
- startLoading()
- // 设置请求头
- if (localStorage.eToken) {
- confing.headers.Authorization = localStorage.eToken
- }
- return confing
- },
- (error) => {
- return Promise.reject(error)
- }
- )
- // 响应拦截
- axios.interceptors.response.use(
- (response) => {
- endLoading()
- return response
- },
- (error) => {
- Message.error(error.response.data)
- endLoading()
- // 获取状态码
- const { status } = error.response
- if (status === 401) {
- Message.error('请重新登录')
- // 清楚 token
- localStorage.removeItem('eToken')
- // 跳转到登录页面
- router.push('/login')
- }
- return Promise.reject(error)
- }
- )
- export default axios
通过创建一个 axios 实例然后 export default 方法导出, 这样使用起来更灵活一些.
2. 在 base.JS 文件中, 用于管理我们请求接口的域名, 极大的方便后期的维护和开发, 如果以后更改域名地址或者增加域名, 只需要修改这样就可以了,
- // 域名统一管理
- const base = {
- url: 'http://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;
- }
- });
- },
以上都是这篇文章所有的说明, 如果喜欢, 可以多多关注一下
来源: https://www.cnblogs.com/zhoulifeng/p/10729883.html