vue-axios-http-api,一个简单好用的Vue和nuxt的http请求api的小工具

🙋‍♂️工具介绍🚀

这是一个基于VUE.JS以及NUXT.JS的axios-http请求API工具。通过http.js分别封装get、post、delete和put请求,同时加入Json格式的post请求方法。使用时只需要在api.js中写上后端的请求方法和路径即可。

🙋‍♂️工具地址🚀

gitee仓库地址

github仓库地址

🤖使用方法🪂

🛺安装axios

npm install @nuxtjs/axios
或者
yarn add @nuxtjs/axios

接着需要配置nuxt.config.js

modules: [
      '@nuxtjs/axios',
  ],

🛺安装proxy

npm install @nuxtjs/proxy
proxy`主要用来配置代理,安装完成之后,同样的需要配置`nuxt.config.js
modules: [
       '@nuxtjs/proxy',
  ],
 axios: {
    proxy: true
  },

proxy: true使得axios使用代理,支持跨域处理。

🛺创建请求

主要用来放http.jsapi.js的地方,方便后续页面的引入;

通常我喜欢单独的创建类似与 api 或者 utils 的文件夹,单独存放,方便管理

然后修改api.js中关于http.js的引入

import http from "@/utils/http";

接着按照后端的接口自行按照api.js中的模板进行修改即可。每一个方法使用export暴露,使得其他地方也可以直接调用;

// 获取系统配置
export const getOptions =()=>{
​
  if (process.client){
    //客户端
    return http.requestPost("/sys/options");
  }else{
    //服务端
    return http.requestPost(baseUrl+"/sys/options");
  }
};

🛺跨域配置

配置nuxt.config.js,加入proxy节点

proxy: {
    '/sys/': {
      target: 'http://localhost:8091',
    },
}

其中 /sys/是请求的路径,都懂的;不同的路径只需要写上第一段即可;

假如是http://localhost:8091/sys后端请求路径后再无其他的字段,那么配置为:

proxy: {
    '/sys/': {
      target: 'http://localhost:8091',
    },
}

假如是http://localhost:8091/sys/update后端请求路径后还有其他的字段,那么也配置为:

proxy: {
    '/sys/': {
      target: 'http://localhost:8091',
    },
}

🤖页面使用

引入

import * as api from "../utils/api";

请求

api.getProCategory().then((res) => {
  if (res.errorCode === api.SUCCESS_CODE) {
});

或者

async asyncData({$axios}) {
  let { res } = await api.getProCategory()
  return:res
 }

🪐官方博客🚀

网站地址:北忘山的博客

此博客主要分享一些软件、教程以及资源类,偶尔也分享一些技术文章,需要软件的朋友可以前往获取,全部免费!

网站收入都来自大家的访问,所以不用担心,最后感谢大家多多支持!!

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容