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 ...
随机推荐
- window安装mysql(详细步骤)
前两天电脑炸了,就重新装了系统重新安装了一遍mysql. 首先 你需要有一个安装包哈哈哈,mysql的安装包. 最好不要安装在c盘呦~ 来进入正题吧... ********************** ...
- Python os.access() 方法
概述 os.access() 方法使用当前的uid/gid尝试访问路径.大部分操作使用有效的 uid/gid, 因此运行环境可以在 suid/sgid 环境尝试. 语法 access()方法语法格式如 ...
- LaTeX公式中的空格
两个quad空格 a \qquad b 两个m的宽度 quad空格 a \quad b 一个m的宽度 大空格 a\ b 1/3m宽度 中等空格 a\;b 2/7m宽度 小空格 a\,b 1/6m宽度 ...
- 请求头缺少 'Access-Control-Allow-Origin'
报错: 火狐上运行,出现报错信息.已拦截跨源请求:同源策略禁止读取位于 https://xxxxxxx 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin' ...
- web-font 个人学习小总结
个人觉得 web-font 分为两种: 第一种就是真正文本字体,客户端没有安装的字体通过远程加载字体来实现特殊字体提高用户体验: icodon.com : http://icodon.com/goo ...
- MySQL--pymysql模块
import pymysqlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa连接conn=pymysql.connect(host='127.0.0. ...
- mysql 5.6 windows 启动脚本
2018-4-25 17:02:08 星期三 下载mysql 5.6 zip(免安装版)到本机 一台电脑上可能装有多个版本的mysql, 启动时为了不影响: 1. 解压后文件夹根目录改名为 mysql ...
- 7-Links
Use the <a> element to define a link Use the href attribute to define the link address Use the ...
- ASP.NET MVC5入门2之Ajax实现数据查询
开发环境:VS2013 数据库:SQL Server2008R2 架构:ASP.NET MVC5 开发语言:C# 代码下载链接:http://download.csdn.net/detail/u010 ...
- ifconfig和ping
命令: ifconfig 对应英文: configure a network interface 作用: 查看 / 配置计算机当前的网卡配置信息 安装: sudo apt install net-to ...