Vue封装axios的示例讲解

1、axios：是一个基于Promise的网络请求库。既可以在node.js(服务器端)使用，也可以在浏览器端使用

（1）在node.js中使用的原生的http模块

（2）在浏览器中使用的XMLHttpRequest

2、vue中的使用方法

（1）安装：npm install axios

（2）引用方法：

原生的方式(不推荐使用)

axios({
      url:'http://127.0.0.1:9001/students/test',  //远程服务器的url
      method:'get',  //请求方式
    }).then(res=>{
      this.students = res.data
    }).catch(e=>{
      console.error(e);
    })
//缺点：每个使用axios的组件都需要导入

注：axios对服务端数据的封装

  • res.config：响应信息的配置情况
  • res.data：响应的数据
  • res.headers：响应头信息(信息的大小、信息的类型)
  • res.request：请求对象
  • res.status：请求、响应的状态码
  • res.statusText：请求、响应状态码对应的文本信息

在项目的main.js文件中导入axios，将其写入Vue的原型中(推荐使用)

import axios from "axios";
Vue.prototype.$http = axios

在组件中通过this.$http的方式使用

this.$http.get('http://127.0.0.1:9001/students/test').then(res=>{
        this.students = res.data
      }).catch(e=>{
        console.log(e)
      })

缺点：只能在vue2使用，vue3中不能用

将axios单独封装到某个配置文件中(在配置文件中单独封装axios实例)

（1）配置文件：axiosApi.js

import axios from "axios";
const axiosApi = axios.create({
    baseURL:'http://127.0.0.1:9001', //基础地址
    timeout:2000        //连接超时的时间(单位：毫秒)
})
export default  axiosApi   //axiosApi是axios的实例

（2）使用：

import $http from '../config/axiosapi'
$http.get('/students/test').then(res=>{
        this.students = res.data.info
      }).catch(e=>{
        console.log(e)
      })

优点：既可以在vue2中使用，也可以在vue3中使用

3、axios的不同请求方式向服务器提交数据的格式：

（1）get请求：服务器端通过req.quert参数名来接收

直接将请求参数绑定在url地址上

let str = '张三'
      $http.get('/students/test/?username='+str).then(res=>{
        this.students = res.data.info
      }).catch(e=>{
        console.log(e)
      })

通过params方式进行提交

let str = '张三'
      $http.get('/students/test',{
        params:{
          username:str
        }
      }).then(res=>{
        this.students = res.data.info
      }).catch(e=>{
        console.log(e)
      })

（2）post方式请求：服务器端通过req.body.参数名获取数据

let str = '张三'
      $http.post('/students/test',{
        username:str
      }).then(res=>{
        this.students = res.data.info
      }).catch(e=>{
        console.log(e)
      })

（3）put方式请求：和post方式一样

（4）delete方式请求：和get方式一样

到此这篇关于Vue封装axios的示例讲解的文章就介绍到这了,更多相关Vue axios内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue浅析axios二次封装与节流及防抖的实现

    Vue浅析axios二次封装与节流及防抖的实现

    目录 什么是axios axios请求图例 axios的二次封装 为什么要进行二次封装 防抖与节流 什么是axios Axios,是一个基于 promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中). 使用方式如下: <script> //调用axios方法得到的返回值是 promise 对象 axios({ //请求方式 method: 'get', // 请求地址 url: 'http://www.liu

  • vue开发中关于axios的封装过程

    目录 关于axios的封装 vue中axios全局封装 axios封装 api的统一管理 关于axios的封装 下面代码参考了 vue-element-admin 中的封装方式,request.js 文件如下,封装一个 axios 实例: import axios from 'axios' import { BASE_URL } from './http' import router from '../router'   // create an axios instance const ser

  • Vue二次封装axios流程详解

    Vue二次封装axios流程详解

    目录 一.为什么要封装axios 二.怎么封装axios 三.具体步骤 vue项目的前期配置 配置config文件中的代理地址 封装axios实例-request.js 四.封装请求-http.js 五.正式封装API用于发送请求-api.js 六.如何在vue文件中调用 一.为什么要封装axios api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护. 通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口

  • Axios在vue项目中的封装步骤

    目录 1. 什么是Axios? 2. 回顾Ajax 3. 回顾Promise 4. Vue封装Axios 1. 什么是Axios? Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js,是一个第三方插件,第三方异步请求工具库 Axios的特点: 可以运行在浏览器和node.js环境中 基于promise,可以调用promiseAPI 默认发送的是get请求,默认post请求发送的数据格式是JSON 除了表单格式数据,对请求数据和响应数据可以自动转换JSON数据格

  • vue3项目中封装axios的示例代码

    目录 axios的基本使用 axios.all()方法 axios一些基本配置 axios的拦截器 封装axios-封装基础属性 封装拦截器 封装公用的拦截器 对单个请求传入拦截器 对request请求方法封装 目前前端最流行的网络请求库还是axios,所以对axios的封装很有必要,此次基于vue3+ts的环境下. axios的基本使用 import axios from 'axios' // console.log('adh') axios.get('http://XXX.xxx.xxx.x

  • vue日常开发基础Axios网络库封装

    目录 引言 axios使用 配置请求基本信息 设置请求拦截器 设置请求响应器 项目中使用 结尾 引言 首先Axios,一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 网络请求库无疑是项目开发中最基础的建设了,在这个前后端分离的时代,市面上有不少优秀的请求库,其中Axios就是优秀代表之一. 拦截请求和响应 转换请求数据和响应数据 自动转换 JSON 数据 客户端支持防御 XSRF 支持 PromiseAPI 以上是axios的优秀点 axios使用 本文是基于

  • Vue简单封装axios网络请求的方法

    Vue简单封装axios网络请求的方法

    目录 Vue简单封装axios网络请求 一.utils下的httpUtils.js: 二./api下的path.js: 三./api下的index.js: 四.组件中引入并请求: Vue简单封装axios网络请求 一.utils下的httpUtils.js: import axios from 'axios'; import querystring from 'querystring'; const errorHandler = (status, info) => { switch(status

  • vue2项目中全局封装axios问题

    目录 vue2全局封装axios 封装axios 封装api 函数 vue2.X中axios简单封装和多功能封装 vue2.X 中axios的简单封装 多功能封装 vue2全局封装axios 封装axios 第一步 1.src 目录中新建utils文件夹 2.utils文件中建立http.js文件 http.js文件的内容 //第一步导入axios import axios from 'axios' import { Toast } from 'vant'; //第二步 我们可以声明一个新的常量

  • Vue封装axios的示例讲解

    1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 (1)在node.js中使用的原生的http模块 (2)在浏览器中使用的XMLHttpRequest 2.vue中的使用方法 (1)安装:npm install axios (2)引用方法: 原生的方式(不推荐使用) axios({ url:'http://127.0.0.1:9001/students/test', //远程服务器的url method:'get', //请求方式

  • Vue封装Axios请求和拦截器的步骤

    PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project axios 是一个基于 promise 的 http 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库. axios很好用,其中之一就是它的拦截器十分强大,我们可以为请求和响应设置拦截器,比如请求拦截器可以在每个请求里加上token,做了统一处理后维护起来也方便,响应拦截器可以在接收到响应后先做一层操作,如根据状态码判断登录状态.授权. 之前初学的时候,经常

  • vue封装axios的几种方法

    基础版 第一步:配置axios 首先,创建一个Service.js,这里面存放的时axios的配置以及拦截器等,最后导出一个axios对象.我平常elementUI用的比较多,这里你也可以使用自己的UI库. import axios from 'axios' import { Message, Loading } from 'element-ui' const ConfigBaseURL = 'https://localhost:3000/' //默认路径,这里也可以使用env来判断环境 let

  • 如何用vue封装axios请求

    如何用vue封装axios请求

    其实vue封装axios是很简单的 首先 在src路径下建http文件夹 并且创建api.js env.js request.js 这三个文件 env.js文件 这个文件主要就是封装我们的公共地址 export default { // 开发环境 dev: { baseUrl: "开发环境公共地址" }, // 测试环境test test: { baseUrl: "测试环境公共地址" }, //线上接口 prod: { baseUrl: "线上环境公共地址

  • vue封装axios与api接口管理的完整步骤

    目录 一.前言 二.axios封装步骤 三.api接口统一管理 总结 一.前言 axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 二.axios封装步骤 安装:npm install axios -S 一般我会在项目的src目录中,新建一个network文件夹,作为我们的网络请求模块,然后在里面新建一个http.js和一个api.js文件和一个reques.js.http.js文件用来封装我们的axios,api.js用来统一管理我们的接口url,

  • Vue项目中如何封装axios（统一管理http请求）

    1.需求说明 在使用Vue.js框架开发前端项目时,会经常发送ajax请求服务端接口,在开发过程中,需要对axios进一步封装,方便在项目中的使用. 2.Vue项目结构 在本地创建Vue项目,目录结构如下: - public  静态资源文件  - src  |- assets  静态资源目录  |- components 公共组件目录  |- http   axios封装目录  |- router  路由管理目录  |- store  状态管理目录  |- views  视图组件目录  |- A

  • vue中封装axios并实现api接口的统一管理

    在vue项目中,我们通常都是使用axios与后台进行数据交互,axios有很多好用的特性,这里不多做介绍,相关细节可以查阅axios中文网.在对axios进行封装之前,我们要使用vue脚手架工具创建一个vue项目(这里我用的是cli4). 安装 cnpm install axios --save-dev; // 安装axios cnpm install qs --save-dev; // 安装qs模块,用来序列化post类型的数据,否则后端无法接收到数据 模块引入 在src目录下创建一个serv

  • vue中如何简单封装axios浅析

    vue中如何简单封装axios浅析

    把axios注入到Vue中 import axios from 'axios'; Vue.prototype.$axios = axios; import axios from 'axios' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头 axios.defaults.withCredenti

  • Vue项目中封装axios的方法

    Vue项目中封装axios的方法

    目录 一.axios是什么 特性 基本使用 二.为什么要封装 三.如何封装 设置接口请求前缀 设置请求头与超时时间 封装请求方法 请求拦截器 响应拦截器 小结 参考文献 一.axios是什么 axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端.自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios.现在 axios 已经成为大部分

随机推荐