介绍

我在使用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简单使用的更多相关文章

  1. vue axios 简单封装以及思考

    先安装 axios npm install axios axios的详细介绍以及用法 就不多说了请 移步 github ➡️  https://github.com/axios/axios 下面是简单 ...

  2. axios 简单常用笔记

    简单认知: 1.config.data是POST参数,config.params是GET参数 axios(url, [config]) + qs + application/x-www-form-ur ...

  3. axios简单了解

    简单介绍 axios是基于客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 ...

  4. axios简单封装

    写在最前面 新手前端刚刚接触vue,感觉真的好用.项目中需要使用axios,然后学习了一下.借鉴网上一些大佬的经验,现在分享一下axios的简单封装,如果有什么错误的地方,请大家指出. axios安装 ...

  5. axios简单理解

    发起一个GET请求 直接使用axios('/user')方法,axios()方法默认为GET方式 axios(’/user/12345’); 使用axios.get()方法,参数直接写以?key=va ...

  6. vue mock(模拟后台数据) +axios 简单实例(二)

    需装上axios,build文件夹中webpack.dev.conf.js文件添加上vue mock配置的东东,  如,继(一) //组件<template> <div> &l ...

  7. axios简单介绍

    axios的配置,get,post,axiso的同步问题解决 一.缘由 vue-resoure不更新维护,vue团队建议使用axios. 二.axios安装 1.利用npm安装npm install ...

  8. axios 简单二次封装

    import axios from 'axios' import { Message } from 'element-ui'; // 设置baseURL //axios.defaults.baseUR ...

  9. vue axios简单配置

    参考:https://www.cnblogs.com/sophie_wang/p/7844119.html 1. 安装 npm install axios 2. main.js import axio ...

随机推荐

  1. k64 datasheet学习笔记45---10/100-Mbps Ethernet MAC(ENET)之功能描述

    1.前言 本文是对K64 datasheet 之ENET部分的功能描述,将对每个部分进行详细说明 2.Ethernet MAC frame formats MAC帧组成格式 (1)7字节前导码:如按最 ...

  2. webstorm的快捷键总结

    ctrl+shift+f 可以在项目和模块中的文件中查找特定字符串 shift键连续敲一下,可以在项目和模块中查找特定的文件 ctrl+d  复制当前行并粘贴到下一行 ctrl+shift+上下方向键 ...

  3. mipi LCD 的CLK时钟频率与显示分辨率及帧率的关系【转】

    转自:https://blog.csdn.net/bmw7bmw7/article/details/45876487 我们先来看一个公式:Mipiclock = [ (width+hsync+hfp+ ...

  4. ES6学习笔记六(Iterator和for..of)

    { let arr=['hello','world']; let map=arr[Symbol.iterator](); //返回false时继续执行,true停止执行! console.log(ma ...

  5. C++ 读取字符串中的数字

    今天真是试了各种方法,笨方法聪明方法都有了 方法1:一个字符一个字符的读取 方法2:借助strtok实现split 适用于char 方法3:借助istringstream实现split 适用于stri ...

  6. 洛谷 P4948 拉格朗日多项式插值(杜老师板子)

    https://www.luogu.org/problemnew/show/P4948 这篇博客主要目的是存一下的dls的神奇板子,本来应该是推公式或者二分做的 但是dls的插值板子直接写好了这个特殊 ...

  7. [转] Git + LaTeX workflow

    本文取自 https://stackoverflow.com/questions/6188780/git-latex-workflow 感谢 abcd@stackoverflow Changes to ...

  8. ansible笔记(12):handlers的用法

    ansible笔记():handlers的用法 这篇文章会介绍playbook中handlers的用法. 在开始介绍之前,我们先来描述一个工作场景: 当我们修改了某些程序的配置文件以后,有可能需要重启 ...

  9. tcpdump抓取mysql语句

    抓包工具tcpdump的使用,抓取具体的sql语句 [root@test7_chat_api_im ~]# tcpdump -s -l - |strings tcpdump: listening on ...

  10. Callcenter 模块解析

    CallCenter模块详细介绍 一. Callcenter模块说明: 提供了呼叫中心的ACD功能,把客户端通过不同的”方案”和”等级”分配给来电,一个以”评分”为基础的系统是用来分配这些呼入.来电者 ...