位置: IT常识 - 正文

vue中axios的使用(vue axios.all)

编辑:rootadmin
vue中axios的使用 1.什么是axios

推荐整理分享vue中axios的使用(vue axios.all),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue axios.all,vue-axios和axios,vue-axios是什么,vue axios.all,vuex中使用axios,vue-axios是什么,vue-axios详细介绍,vue-axios详细介绍,内容如对您有帮助,希望把文章链接给更多的朋友!

1.axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。

2.axios本质上也是对原生XHR的封装,只不过是promise的实现版本

3.用来向后端发送http请求,获取后端发送的数据

2.怎么在vue项目中使用axios

1.安装axios

npm install --save axios

2.axios二次封装

对axios进行二次封装主要是为了设置请求拦截器(在请求发出之前做一些事情)和响应拦截器(在数据返回之后,做一些事情)

假如我的请求的接口如下:http://219.199.230.250/local/user/login

(1)建立以下文件夹和文件,在axios.js中进行axios的二次封装,代码如下

//对于axios进行二次封装import axios from "axios";//底下的代码也是创建axios实例let requests = axios.create({ //基础路径 baseURL: "/local", //请求不能超过5S timeout: 5000,});//请求拦截器(可以在请求发出去之前,做一些事情)requests.interceptors.request.use((config) => { return config;});//响应拦截器(在数据返回之后,做一些事情)requests.interceptors.response.use( (res) => { //相应成功 return res.data; }, (err) => { //响应失败 alert("服务器响应数据失败"); });export default requests;

注释:由于我的接口的路径前面都是带有/local的,所以这baseURL设置的是/local

vue中axios的使用(vue axios.all)

(2)在index.js中设置具体的接口

import requests from "./axios"; //引入二次封装的axiosexport const login = (params)=>requests({url:'/user/login ',method:'post',data:params});

(3)配置代理服务器

由于浏览器的同源策略,前端直接向服务器发送请求时会产生跨域问题,所以可以配置一个代理服务器去转发前端的请求,因为服务器和服务器之间不会产生跨域问题。

在vue.config.js中添加以下代码

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, devServer: { //配置代理服务器 proxy: { "/local": { target: "http://218.197.228.251", }, },},})

将路径的前面带有local的请求转发到地址为http://218.197.228.251的服务器上

(4)接口的调用

 3.如何使用axios发送各种请求

1.将参数拼接到路径后面,以params的形式,或者不用携带参数

​export const login = (data)=>requests({url:'/user/login '+data,method:'get'});

模板字符串写法

export const login = (data)=>requests({url:'/user/login',method:'post',data:data});

2.在body中携带参数

export const login = (data)=>requests({url:'/user/login',method:'post',data:data});

3.将参数拼接到路径后,以query参数的形式

export const login = (params)=>requests({url:'/user/login',method:'get',params:params});

此时调用的参数会以qurey的形式拼接到路径后面

login({id:1,name:'Anna})

此时请求的路径为:/user/login?id=1&name=Anna

另外一种写法

export const login = (id,name)=>requests({url:`/user/login?id=${id}&name=${name}`,method:'get'});
本文链接地址:https://www.jiuchutong.com/zhishi/299348.html 转载请保留说明!

上一篇:【vue2】对路由的理解(vue路由实例)

下一篇:使用Vue+axios+Vuex实现登录后前端数据本地化存储实战(使用二氧化碳灭火器时人应该站在什么位置)

  • 非居民企业享受协定待遇
  • 公司租的库房应该计入什么科目
  • 增值税进项税额不得抵扣的几种情形
  • 特许经营权转让合同
  • 个人所得税手续费奖励是否交个税
  • 装卸搬运服务属于什么税目
  • 怎么查对方一个月去了什么地方
  • 普通发票金额和申报工资有关系吗
  • 工会经费计税依据是应发还是实发
  • 托收承付和委托收款的含义和相同之处
  • 收到销售折让的红字怎么做账
  • 新成立的公司银行存款如何入账
  • 收到员工的罚款钱怎么写分录
  • 销售废旧物资增值税新政策
  • 未确认融资费用借贷方向
  • 餐饮店投资入股注意事项
  • 收到供应商发票的会计处理怎么做?
  • 取得进项票当月未认证
  • 社会组织接受捐赠的资金的使用原则
  • 异地劳务公司所在地怎么交税
  • 处理固定资产如何开票
  • 增加注册资本需要多少股东通过
  • 金税盘用途
  • 税字号是不是纳税人识别号
  • 销售蔬菜水果需要什么证件
  • 关于有什么新的政策
  • 小规模印花税减免性质代码和项目名称
  • 会计报表上总资产怎么填
  • 所得税季报总资产是什么
  • 研发样品销售成本
  • 外账的银行存款怎么处理
  • 增值税留抵税额会计科目
  • 花语大全各种花的花语花树
  • win10鼠标在哪
  • 在win7系统中如何让电脑恢复出厂设置方法
  • 查账征收的个独可以随意分配利润吗
  • 固定资产清理应交税费怎么算
  • 客运企业安全费用提取标准
  • 关闭非系统进程
  • 微信小程序使用记录删除
  • vue自定义日历组件
  • 工具人
  • vue组件元素设置滚动条高度
  • 后端中spef文件和spf文件
  • 投标代理服务
  • 进项税加计抵减是什么意思
  • 材料采购成本计算表
  • 单位出租厂房需交税吗
  • 债权投资产生的暂时性差异确认所得税吗
  • 商誉减值可以避税吗
  • 普通发票可抵税吗
  • 定期定额自行申报表
  • 利息收入如何入会计科目
  • 发票未到货已入库会计分录 原材料
  • 原材料采购未入库会计分录
  • 资产处置损益计入利润表哪个项目
  • 待抵扣进项税额
  • 小规模纳税人购进税控收款机
  • 个体工商户如何给员工交五险一金
  • 会计账簿的含义及其作用
  • 商业企业所有者的权益
  • fedora系统怎么设置停电关机
  • 怎么用winxp的系统光盘启动
  • vmware虚拟化解决方案
  • windos8怎么样
  • 预装win7系统
  • 在Windows Server 2012中,管理员默认的用户名是
  • windows恶意软件删除工具怎么安装
  • jquery对动态生成的进行操作
  • textview可以点击吗
  • css渐变文本效果在哪
  • python迭代器生成器
  • js如何获取当前页面的url
  • javascript面向对象编程
  • 税务金三系统什么意思?
  • 国税地税怎么分成
  • 开发商卖商铺需要哪些资质条件?
  • 原木进项税率
  • 忘记了密码怎么打开手机
  • 耕地占用税应该什么时候交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设