axios入门 |
您所在的位置:网站首页 › 基金从业科目一真题及答案 › axios入门 |
写在前面
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 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |