浅谈在Vue-cli里基于axios封装复用请求

本文介绍了浅谈在Vue-cli里基于axios封装复用请求，分享给大家，具体如下：

安装

只用安装一个axios就可以了。

npm install axios --save

接口代理设置

为了请求可以正常发送，我们一般要进行一个接口代理的配置，这样可以避免请求跨域，项目打包之后，后端一般也要搭建一个nginx之类的东西进行转发请求，不然请求会因为跨域问题失败的。

//文件位置：config/index.js
proxyTable: {
 '/api': {
  target: 'http://47.95.xxx.246:8080', // 通过本地服务器将你的请求转发到这个地址
  changeOrigin: true, // 设置这个参数可以避免跨域
  pathRewrite: {
   '/api': '/'
  }
 },
},

设置好了之后，当你在项目中要调用 http://47.95.xxx.246:8080 这个服务器里面的接口，可以直接用 /api 代替服务器地址。

发起请求

main.js入口文件中：

import axios from 'axios';//引入文件
Vue.prototype.$http = axios;//将axios挂载到Vue实例中的$ajax上面,在项目中的任何位置通过this.$http使用

没有封装发起请求：

//没有封装的时候，在组件中发起请求的方式：
  this.$ajax({
    url:'/api/articles',//api 代理到json文件地址，后面的后缀是文件中的对象或者是数组
    method:'get',//请求方式
    //这里可以添加axios文档中的各种配置
   }).then(function (res) {
    console.log(res,'成功');
   }).catch(function (err) {
    console.log(err,'错误');
   })
//还可以像下面这么简写
 this.$ajax.get('api/publishContent').then((res) => {
  console.log(res,'请求成功')
 },(err)=>{
  console.log(err,'请求失败');
 });

封装请求

封装的时候，我通常喜欢把请求抽象成三个文件，文件位置放在src中，只要你能引用到，就没问题，如下图所示：

创建三个.js文件，里面我都很认真的注释了，我就直接贴图片了，在文末我把这三个文件的地址发出来，需要的小伙伴自取。

fetch.js：

url.js:

api.js

在组件里面如何使用接口：

封装axios文件地址在这里：传送门

代码注释什么的，已经蛮多了，跟着文章一步一步走，实现封装axios请求，没毛病的。本文并没有把很多功能都完整的列出来，主要是追求一个上手，剩下的东西，各位小伙伴们可以自行研究。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 里面使用axios 和封装的示例代码

    vue官方推荐使用 axios发送请求 首先上需求 1.需要封装全局调用 2.返回一个promise对象 3.错误全局统一处理 4.除了登录界面token带入头部 5.登录时候把用户信息自动存到vuex里面 首先上封装代码 /** * User: sheyude * Date: 2017/8/23 0023 * Time: 下午 13:15 * */ import axios from 'axios'; // 导入配置文件 配置文件就导入的请求的前缀地址 import {defaults} fr

  • 详解Vue 2.0封装axios笔记

    详解Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐.已有的用户可以继续使用,但以后不再把

  • 浅谈在Vue-cli里基于axios封装复用请求

    浅谈在Vue-cli里基于axios封装复用请求

    本文介绍了浅谈在Vue-cli里基于axios封装复用请求,分享给大家,具体如下: 安装 只用安装一个axios就可以了. npm install axios --save 接口代理设置 为了请求可以正常发送,我们一般要进行一个接口代理的配置,这样可以避免请求跨域,项目打包之后,后端一般也要搭建一个nginx之类的东西进行转发请求,不然请求会因为跨域问题失败的. //文件位置:config/index.js proxyTable: { '/api': { target: 'http://47.9

  • 基于axios封装fetch方法及调用实例

    基础axios用法请看axios官网 //依赖于axios对私有ajax进行修改 import Qs from 'qs' import axios from 'axios' import router from 'router/index' import {errorPrompt, loading, closeLoading} from 'util/util' export const status = { SUCCESS: '100', NET_ERR: '101', // 网络连接异常,请稍

  • 浅谈使用Vue完成移动端apk项目

    浅谈使用Vue完成移动端apk项目

    我们项目使用的是Vue和Vant组件,详情都可以看官网哦 Vant Vue 完整项目视频链接 目录结构: 基本配置 入口文件main.js 首先做一个引入 我们的Vant UI组件是按需引入,而Element UI是全部引入 所以引用方式也不同 main.js完整代码 // 引入Vue import Vue from 'vue' // 引入根组件App.vue import App from './App.vue' // 引入router路由 import router from './rout

  • 浅谈在vue中使用mint-ui swipe遇到的问题

    使用步骤: 1.安装:npm install mint-ui -S 2.引入组件 // 完整引入import Vue from 'vue'; import Mint from 'mint-ui'; import "mint-ui/lib/style.css" Vue.use(Mint); // 按需引入 注意:和Element-ui类似,按需引入时需要借助babel-plugin-component插件 npm install babel-plugin-component -D 修改.

  • vue 组件的封装之基于axios的ajax请求方法

    如下所示: import Vue from 'vue' let service = { url: 'http://host.xxxxx.com/xxx.php' } service.ajaxReuqest = (url, options, type, fileFlag) => { for (const i in options) { if (!options[i] && options[i] !== 0 && (options[i].length &&

  • 浅谈Java如何实现一个基于LRU时间复杂度为O(1)的缓存

    LRU:Least Recently Used最近最少使用,当缓存容量不足时,先淘汰最近最少使用的数据.就像JVM垃圾回收一样,希望将存活的对象移动到内存的一端,然后清除其余空间. 缓存基本操作就是读.写.淘汰删除. 读操作时间复杂度为O(1)的那就是hash操作了,可以使用HashMap索引 key. 写操作时间复杂度为O(1),使用链表结构,在链表的一端插入节点,是可以完成O(1)操作,但是为了配合读,还要再次将节点放入HashMap中,put操作最优是O(1),最差是O(n). 不少童鞋就

  • 基于Axios 常用的请求方法别名(详解)

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 常用的请求方法别名一般有: Get/post/http协议请求 执行Get请求 function get(){ return axios.get('/data.json', { params:{ id:1234 } }).then(function (response) { console.log(response); }) .catch(function (error) { console.log

  • vue 2.x 中axios 封装的get 和post方法

    vue 2.x axios 封装的get 和post方法 import axios from 'axios' import qs from 'qs' export class HttpService { Get(url, data) { return new Promise((resolve, reject) => { axios.get(url, { params: data }).then((res) => { if (res) { //成功回调 resolve(res); } }).ca

  • 在vue项目中使用axios发送post请求出现400错误的解决

    目录 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 总结了错误的几个原因 vue axios400 Bad Request问题 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 1.bad request:“错误的请求" 2.invalid hostname:"不存在的域名” 我报的错是第一种bad request 总结了错误的几个原因 1.请求头错误,前端请求头的content-type和后端不一致 axios默认的请求头的

  • Vue项目中如何使用Axios封装http请求详解

    前言 使用axios可以统一做请求响应拦截,例如请求响应时我们拦截响应信息,判断状态码,从而弹出报错信息.请求超时的时候断开请求,还可以很方便地使用then或者catch来处理请求. 下载源码 安装 npm install axios --save 建立http.js文件 在/src/utils/目录下建立一个htttp.js 1.首先导入axios和router. import axios from 'axios'; import router from '../router'; 2.接着设置

随机推荐