axios入门

2024-07-18 02:08:41| 来源: 网络整理| 查看: 265

写在前面

axios中文说明

为方便起见，axios为所有支持的请求方法提供了别名 params 是将与请求一起发送的 URL 参数，对应后台中的query data 是作为请求主体被发送的数据，对应后台中的body

axios.request(config) axios.get(url[, config]) // 只支持 params 传参 axios.delete(url[, config]) // 只支持 params传参 axios.head(url[, config]) // 只支持 params传参 axios.post(url[, data[, config]]) // 同时支持 data 和 params axios.put(url[, data[, config]]) // 同时支持 data 和 params axios.patch(url[, data[, config]]) // 同时支持 data 和 params

注意在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

一、axios安装

正常情况下使用脚手架vue-cli创建的项目都集成了axios插件，无需安装，如果需要安装请使用npm install axios --save 命令进行安装

二、axios常见5种请求方法 get请求

用于获取数据。

post请求

用于提交数据（新建）、包括表单提交及文件上传。

put请求

用于更新数据（修改），将所有数据都推送到后端。

patch请求

用于更新数据（修改），只将修改的数据推送到后端。

delete请求

用于删除数据。

三、代码示例

首先导入axios，导入代码：

import axios from 'axios' 1. get方法 import axios from 'axios' export default { name: 'get请求'， components: {}, created() { //写法一 axios.get('接口地址', { params: { id: 12,//请求参数 }, }).then( (res) => { //执行成功后代码处理 } ) //写法二 axios({ method: 'get',//请求方法 params: { id: 12,//请求参数 }, url: '后台接口地址', }).then(res => { //执行成功后代码处理 }) } } 2. post请求

post方式请求，参数有两种形式：

form-data表单提交（图片上传，文件上传）applicition/json 1）applicition/json请求方式代码如下： import axios from 'axios' export default { name: 'get请求'， components: {}, created() { //写法一 let data={ id:12 } axios.post('接口地址', data}).then( (res) => { //执行成功后代码处理 } ) //写法二 axios({ method: 'post',//请求方法 data: data, url: '后台接口地址', }).then(res => { //执行成功后代码处理 }) } }

2）formData请求方式代码如下：

import axios from 'axios' export default { name: 'get请求'， components: {}, created() { //写法一 let data = { id:12 } let formData = new formData() for(let key in data){ fromData.append(key,data[key]) } axios.post('接口地址', fromData}).then( (res) => { //执行成功后代码处理 } ) //写法二 axios({ method: 'post',//请求方法 data: fromData, url: '后台接口地址', }).then(res => { //执行成功后代码处理 }) } } 3. put请求 import axios from 'axios' export default { name: 'get请求'， components: {}, created() { //写法一 let data = { id:12 } axios.put('接口地址', data}).then( (res) => { //执行成功后代码处理 } ) //写法二 axios({ method: 'put',//请求方法 data: data, url: '后台接口地址', }).then(res => { //执行成功后代码处理 }) } } 4. patch请求 import axios from 'axios' export default { name: 'get请求'， components: {}, created() { //写法一 let data = { id:12 } axios.patch('接口地址', data}).then( (res) => { //执行成功后代码处理 } ) //写法二 axios({ method: 'patch',//请求方法 data: data, url: '后台接口地址', }).then(res => { //执行成功后代码处理 }) } } 5. delete请求 import axios from 'axios' export default { name: 'get请求'， components: {}, created() { //写法一 let data = { id:12 } //url传递参数 axios.delete('接口地址', { parmas:{ id:12 } }).then( (res) => { //执行成功后代码处理 } ) //post方式传递参数 axios.delete('接口地址', { data:{ id:12 } }).then( (res) => { //执行成功后代码处理 } ) //写法二 axios({ method: 'patch',//请求方法 parmas:{ id:12 }, url: '后台接口地址', }).then(res => { //执行成功后代码处理 }) } }

put和patch的区别 https://blog.csdn.net/lhjuejiang/article/details/82112998

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

axios入门

axios入门

今日新闻

点击排行

推荐新闻

图片新闻

专题文章