vue统一管理api接口（vue如何调用api）

本篇文章给大家谈谈vue统一管理api接口，以及vue如何调用api对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享vue统一管理api接口的知识，其中也会对vue如何调用api进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、vue入门：对vue项目中api接口的封装管理
• 2、vue 封装数据请求
• 3、vue项目nginx必备配置-----API 接口代理
• 4、vue项目开发api层架构
• 5、封装几个Vue3中很有用的组合式API

vue入门：对vue项目中api接口的封装管理

在以前的文档中，我们构建了vue项目的整体架构，详见 vue入门：vue项目架构设计起步 ，现在我们主要对其中的api接口封装进行完善，并将过程做个记录，与之分享。

很多朋友在开发过程中，习惯性直接将api的调用写在单个组件之中，就直接调用请求。例如：
在前端项目开发中，从整体架构出发，我们可以将项目中所有api进行封装，从而便于我们进行统一管理。

在src目录下，新建api文件夹，在api文件夹下创建index.js和api.js。

1、api.js。主要用来统一管理项目所有api请求。 如下：

import axios from 'axios'

let host = window.g.ApiUrl

// 获取主页信息

export const getindex = params = { return axios.get(`${host}/api/index/`, { params: params }) }

// 获取城市信息

export const getcity = params = { return axios.get(`${host}/api/city/`) }

// 获取详细信息

export const getdetail = params = { return axios.get(`${host}/api/detail/`, { params: params }) }

// 注册

export const postRegister = params = { return axios.post(`${host}/api/register/`, { params: params }) }
2、index.js。主要用来输出api，供外部引入。 如下：

import * as api from './api'

export default api
3、在组件中调用api接口 。例如：
这样，我们就可以在api.js中查阅到项目中所有api接口的调用，便于接口的管理。

vue 封装数据请求

npm install axios --save

npm install qs

import 'amfe-flexible'

import store from './store/store.js'

// 在http.js中引入axios

import axios from 'axios'; // 引入axios

import { Message } from "element-ui";

import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到

import store from '../store/store'

import base from './base'

import { bus } from './api'
// 通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。

// post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8

const instance = axios.create({

  baseURL: base.sq,

  timeout: 1000,

  headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}

});

// 请求拦截器

// 每次发送请求之前判断vuex中是否存在token

// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况

// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

instance .interceptors.request.use(

  config = {

    const token = sessionStorage.getItem("token");

    token (config.headers.Authorization = token);

    // const token = store.state.token;

    // console.log(store.state.token)

    // token (config.headers.Authorization = token);

    store.state.loading = true;

    return config;

  },

  error = {

    console.log('请求超时，请稍后重试！')

    return Promise.error(error);

  }

);

// 添加一个响应拦截器

instance .interceptors.response.use(

  // 请求成功

  res = {

    store.state.loading = false;

    // 返回的状态码

    // console.log(res.data , res.data.status)

    if (res.data res.data.status) {

      if (parseInt(res.data.status) === 401) {

        //未登录

        Message({

          showClose: true,

          message: "请登录...",

          type: "error",

          duration: 2000

        });

        setTimeout(function(){

          bus.$emit('goto', '/login')

        },2000);

      }else if (parseInt(res.data.status) === 402){

        Message({

          showClose: true,

          message: res.data.err,

          type: "error",

          duration: 2000

        });

      }

    }

    return res;

    // res.status === 200 ? Promise.resolve(res) : Promise.reject(res),

  },

  // 请求失败

  error = {

    const {

      response

    } = error;

    if (response) {

      // 请求已发出，但是不在2xx的范围

      if (error.response.status == '400' || error.response.status == '404') {

        Message({

          showClose: true,

          message: "请求方式出错",

          type: "error",

          duration: 2000

        });

      } else if (error.response.status == '403') {

        Message({

          showClose: true,

          message: '您没有此权限',

          type: "error",

          duration: 2000

        });

      } else if (error.response.status == '402') {

        Message({

          showClose: true,

          message: '登录失败，请检查账号密码！',

          type: "error",

          duration: 2000

        });

      } 

      store.state.loading = false

      // Do something with response error

      return Promise.reject(error);

    } else {

      // 处理断网的情况

      // eg:请求超时或断网时，更新state的network状态

      // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏

      // 关于断网组件中的刷新重新获取数据，会在断网组件中说明

      Message({

        showClose: true,

        message: '断网了,请检查网络链接',

        type: "error",

        duration: 2000

      });

    }

  }

);

/**

* 封装get方法

* @param url

* @param params

* @returns {Promise}

*/

export function get(url, params) {

  return new Promise((resolve, reject) = {

    instance.axios.get(`${url}`, {

        params: params

      })

      .then(res = {

        resolve(res);

      })

      .catch(err = {

        reject(err)

      })

  })

}

/**

* 封装post请求

* @param url

* @param params

* @returns {Promise}

*/

export function post(url, params) {

  return new Promise((resolve, reject) = {

    instance.axios.post(`${url}`, QS.stringify(params))

      .then(res = {

        resolve(res);

      }, err = {

        reject(err)

      })

  })

}

/**

* 封装patch请求

* @param url

* @param params

* @returns {Promise}

*/

export function patch(url, params) {

  return new Promise((resolve, reject) = {

    instance.axios.patch(`${url}`, QS.stringify(params))

      .then(res = {

        resolve(res);

      }, err = {

        reject(err)

      })

  })

}

/**

* 封装put请求

* @param url

* @param params

* @returns {Promise}

*/

export function put(url, params) {

  return new Promise((resolve, reject) = {

    instance.axios.put(`${url}`, QS.stringify(params))

      .then(res = {

        resolve(res);

      }, err = {

        reject(err)

      })

  })

}

import Vue from 'vue'

import axios from 'axios'

import {get,post,fetch,patch,put} from './http'

//定义全局变量

Vue.prototype.$get=get;

Vue.prototype.$post=post;

Vue.prototype.$patch=patch;

Vue.prototype.$put=put;

/**

* api接口统一管理

*/

// 获取token跳转页面

export const bus = new Vue();

//bus是判断无token情况下请求数据，会跳转登录页面方法在http.js下面的$emit，$on设置在index.vue或者app.vue里面都可以

//$on

created(){

    bus.$on('goto', (url) = {

      if (url === "/login") {

        sessionStorage.removeItem('token');

      }

      this.$router.push(url);

    })

  },
// get

export const tTable = data = get('/table', data);

// post

export const Terrar = data = post('/errar', data);
/**

* 接口域名的管理

*/

const base = {

  sq: 'https://www.xxxxx.com/api ',

}

export default base

vue项目nginx必备配置-----API 接口代理

API 接口代理

我们一般做vue的项目都会配置接口代理，比如以 /API 径开头的请求都代理到本机的3000端口

那么问题来了这里的配置只有在本机没打包的时候才有效的，打包之后/API 径开头的请求就不会代理了，上传到服务器后

如何解决呢？

办法来了！！！

我的后台服务是node的，也部署在同一个服务器，开启的是3000端口

看如下nginx配置

好了看上面配置后面的注释吧，就这样配置绝逼没问题

vue项目开发api层架构

什么是axios?

官方解释 vue统一管理api接口：Axios 是一个基于 promise 的 HTTP 库vue统一管理api接口，可以用在浏览器和 node.js 中。

axios 为了方便使用也提供了很多请求方法的别名：

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

而对于使用也有多种方式

1、有部分人喜欢在页面中直接使用

这样是很不好的方式vue统一管理api接口，不利于维护，如果哪天需要修改url,那么修改涉及到的页面可能会很多。

2、我们可以对axios进行封装，将axios封装，配置、响应拦截、请求方法都在一个request.js文件中

在api.js中调用request.js请求设置URL

在到页面中调用

getUsers({data:''}).then((res)={

//处理返回结果

})

这样封装了axios,基本就满足了我们的需求，目前一些应用框架都是这样写的，比如vue-admin。 之前，我也是使用这种方式。

3、上一种方式如果要定义一个接口，需要在api.js 去调用request.js的方法。

而接下来说的只需要按模块配置URL和请求方式就可以了。

定义一个server.js文件，用来创建axios实例，配置和响应拦截。

定义一个getRequest.js 文件，将传过来的模块对象生成对应的api接口，可默认处理返回结果，如需要特殊处理可传success回调函数，也可使用promise的方式。

api.js文件，只需要配置url和type就可以。

页面调用 需要引入api.js文件，或者将api.js挂载到Vue.prototype.$api上

this.$api.vueCase(this)

this.$api.system.login(data);

封装几个Vue3中很有用的组合式API

使用hook来封装一组数据的操作是很容易的vue统一管理api接口，例如下面的 useBook

其中封装vue统一管理api接口了获取资源、处理加载状态等逻辑vue统一管理api接口，看起来貌似能满足我们的需求了

缺点在于对应另外一个资源而言vue统一管理api接口，我们貌似还需要写类似的模板代码，因此可以将这一堆代码进行抽象，封装成 useApi 方法

然后修改上面的 useBook 方法

注意这是一个非常通用的方法，假设现在需求封装其他的请求，处理起来也是非常方便的，不需要再一遍遍地处理loading和error等标志量

处理网络请求是前端工作中十分常见的问题，处理上面列举到的加载、错误处理等，还可以包含去抖、节流、轮询等各种情况，还有离开页面时取消未完成的请求等，都是可以在 useRequest 中进一步封装的

我们在组件初始化时监听事件，在交互时触发事件，这些是很容易理解的；但很容易被遗忘的是，我们还需要在组件卸载时取消事件注册，释放相关的资源。

因此可以封装一个 useEventBus 接口，统一处理这些逻辑

既然要在组件卸载时取消注册的相关事件，简单的实现思路是vue统一管理api接口：只要在注册时( on 和 once )收集相关的事件和处理函数，然后在 onUnmounted 的时候取消( off )收集到的这些事件即可

因此我们可以劫持事件注册的方法，同时额外创建一个 eventMap 用于收集使用当前接口注册的事件

这样，当组价卸载时也会通过 instance.clear 移除该组件注册的相关事件，比起手动在每个组件 onUnmounted 时手动取消要方便很多。

这个思路可以运用在很多需要在组件卸载时执行清理操作的逻辑，比如：

参考：

当掌握了Hook（或者Composition API）之后，感觉万物皆可hook，总是想把数据和操作这堆数据的方法封装在一起，比如下面的计数器

这个 useCounter 暴露了获取当前数值count、增加数值decrement和减少数值increment等数据和方法，然后就可以在各个组件中愉快地实现计数器了

在某些场景下我们希望多个组件可以共享同一个计数器，而不是每个组件自己独立的计数器。

一种情况是使用诸如vuex等全局状态管理工具，然后修改 useCounter 的实现

然后重新实现 useCounter

很显然，现在的 useCounter2 仅仅只是store的 state 与 mutations 的封装，直接在组件中使用store也可以达到相同的效果，封装就变得意义不大；此外，如果单单只是为了这个功能就为项目增加了vuex依赖，显得十分笨重。

基于这些问题，我们可以使用一个 useModel 来实现复用某个钩子状态的需求

整个思路也比较简单，使用一个Map来保存某个hook的状态

然后包装一下 useCounter

这样，在每次调用 useCounter3 时，都返回的是同一个状态，也就实现了多个组件之间的hook状态共享。

userModel 提供了一种除 vuex 和 provide()/inject() 之外共享数据状态的思路，并且可以很灵活的管理数据与操作数据的方案，而无需将所有state放在一起或者模块下面。

缺点在于，当不使用 useModel 包装时， useCounter 就是一个普通的hook，后期维护而言，我们很难判断某个状态到底是全局共享的数据还是局部的数据。

因此在使用 useModel 处理hook的共享状态时，还要要慎重考虑一下到底合不合适。

redux的思想可以简单概括为

我们甚至可以将redux的使用hook化，类似于

然后实现一个 useRedux 负责传递 reducer 和 action

我们希望是维护一个全局的store，因此可以使用上面的 useModel

然后就可以在组件中使用了

看起来跟我们上面 useModel 的例子并没有什么区别，主要是暴露了通用的 dispatch 方法，在reducer处维护状态变化的逻辑，而不是在每个useCounter中自己维护修改数据的逻辑

当然这个redux是非常简陋的，包括中间件、 combineReducers 、 connect 等方法均为实现，但也为我们展示了一个最基本的redux数据流转过程。

前端很多业务场景下都需要处理节流或去抖的场景，节流函数和去抖函数本身没有减少事件的触发次数，而是控制事件处理函数的执行来减少实际逻辑处理过程，从而提高浏览器性能。

一个去抖的场景是：在搜索框中根据用户输入的文本搜索关联的内容并下拉展示，由于input是一个触发频率很高的事件，一般需要等到用户停止输出文本一段时间后才开始请求接口查询数据。

先来实现最原始的业务逻辑

然后在视图中引入

与 useApi 同理，我们可以将这个debounce的逻辑抽象出来，，封装成一个通用的 useDebounce

貌似不需要我们再额外编写任何代码，直接将 debounce 方法重命名为 useDebounce 即可，为了凑字数，我们还是改装一下，同时增加cancel方法

节流与去抖的封装方式基本相同，只要知道 throttle 的实现就可以了。

从去抖/节流的形式可以看出，某些hook与我们之前的工具函数并没有十分明显的边界。是将所有代码统一hook化，还是保留原来引入工具函数的风格，这是一个需要思考和实践的问题 关于vue统一管理api接口和vue如何调用api的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 vue统一管理api接口的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue如何调用api、vue统一管理api接口的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。