axios简单使用
介绍
我在使用vue的时候使用到了axios,vue 1.0的版本作者推荐使用vue-resource,到了vue 2.0作者建议使用axios,此篇文章只是我在使用axios时候做的笔记,我遇到的一个些坑,如需查看axios详细api的使用文档请看官网https://www.npmjs.com/package/axios
Get,Delete,Head简单使用
get(url: string, config?: AxiosRequestConfig): AxiosPromise;
delete(url: string, config?: AxiosRequestConfig): AxiosPromise;
head(url: string, config?: AxiosRequestConfig): AxiosPromise
这三个方法使用方式属于同一类型,Get方法使用示例如下,其他两个同理
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); // Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Post,Put,Patch简单使用
post(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise;
put(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise;
patch(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise;
这三个方法使用方式属于同一类型,Post方法使用示例如下,其他两个同理:
axios.post(url,JSON.stringify(requestdata),{ headers: { 'Content-Type': 'application/json' },data:{}}).then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
这里需要注意的是data:{} 必须添加这个,即使data里面是空,headers是添加http表头的
axios post上传表单的时候,需要注意的是 headers: { 'Content-Type': 'application/x-www-form-urlencoded' 这个值,否则后台是接收不到值的
var formData = new FormData();
formData.append('file', this.$refs.fileData['files'][0], this.$refs.fileData['files'][0].name);
formData.append('applicationName', this.form.applicationName); axios.post(url, formData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
.then(response => {
console.log(res.data)
})
.catch(error => {
console.log(error)
});
axios简单使用的更多相关文章
- vue axios 简单封装以及思考
先安装 axios npm install axios axios的详细介绍以及用法 就不多说了请 移步 github ➡️ https://github.com/axios/axios 下面是简单 ...
- axios 简单常用笔记
简单认知: 1.config.data是POST参数,config.params是GET参数 axios(url, [config]) + qs + application/x-www-form-ur ...
- axios简单了解
简单介绍 axios是基于客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 ...
- axios简单封装
写在最前面 新手前端刚刚接触vue,感觉真的好用.项目中需要使用axios,然后学习了一下.借鉴网上一些大佬的经验,现在分享一下axios的简单封装,如果有什么错误的地方,请大家指出. axios安装 ...
- axios简单理解
发起一个GET请求 直接使用axios('/user')方法,axios()方法默认为GET方式 axios(’/user/12345’); 使用axios.get()方法,参数直接写以?key=va ...
- vue mock(模拟后台数据) +axios 简单实例(二)
需装上axios,build文件夹中webpack.dev.conf.js文件添加上vue mock配置的东东, 如,继(一) //组件<template> <div> &l ...
- axios简单介绍
axios的配置,get,post,axiso的同步问题解决 一.缘由 vue-resoure不更新维护,vue团队建议使用axios. 二.axios安装 1.利用npm安装npm install ...
- axios 简单二次封装
import axios from 'axios' import { Message } from 'element-ui'; // 设置baseURL //axios.defaults.baseUR ...
- vue axios简单配置
参考:https://www.cnblogs.com/sophie_wang/p/7844119.html 1. 安装 npm install axios 2. main.js import axio ...
随机推荐
- MySQL伪master+Binlog+同步【转】
MySQL 中drop 等高危误操作后恢复方法 实验目的: 本次实验以恢复drop操作为例,使用不同方法进行误操作的数据恢复. 方法: 利用master同步 :伪master+Binlog+同步(本文 ...
- 使用new data计算时间以及格式转换
1.时间计算,往后加30(默认一个月的时间),sxTime表示的是在当前时间往后加几天的之后一个月 function maxDate1(){ var nowDate = new Date(); max ...
- Centos 7 安装Docker-ce记录
以前尝试过在centos 6上安装Docker , 需要升级内核,支持aufs,比较麻烦:在使用过程中出现过Docker挂掉的情况,官方建议在64 位 centos 7 上运行,本文将安装步骤记录下来 ...
- 7-Links
Use the <a> element to define a link Use the href attribute to define the link address Use the ...
- Uncaught RangeError: Maximum call stack size exceeded
环境: jquery+bootstrap+bootstrapValidator 问题描述:有个form表单,一点击按钮提交,就会报如题错误.正常应该是去校验表单输入. 解决: 从日志分析来看,报错的起 ...
- 【原创】大叔经验分享(34)hive中文注释乱码
在hive中查看表结构时中文注释乱码,分为两种情况,一种是desc $table,一种是show create table $table 1 数据库字符集 检查 mysql> show vari ...
- python字符串,列表常用操作
24天养成一个好习惯,第五天! 一.字符串需要掌握的操作 1.取值(索引取值)需要注意的是只能取,不能改 msg = 'hello world' print(msg[4]) 2.切片(顾头不顾尾) m ...
- Codeforces 1117G Recursive Queries [线段树]
Codeforces 洛谷:咕咕咕 思路 设\(L_i,R_i\)为\(i\)左右第一个大于它的位置. 对于每一个询问\(l,r\),考虑区间每一个位置的贡献就是\(\min(r,R_i-1)-\ma ...
- 大数据python词频统计之本地分发-file
统计某几个词在文章出现的次数 -file参数分发,是从客户端分发到各个执行mapreduce端的机器上 1.找一篇文章The_Man_of_Property.txt如下: He was proud o ...
- WebSocket异步通讯,实时返回数据相关问题论坛
https://stackoverflow.com/questions/23773407/a-websockets-receiveasync-method-does-not-await-the-ent ...