axios笔记
参考:http://www.cnblogs.com/Upton/p/6180512.html
https://cloud.tencent.com/developer/article/1098141 这个不错
首先就是引入axios,如果你使用es6,只需要安装axios模块之后
import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios
axios提供了一下几种请求方式
axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项
//config
import Qs from 'qs'
{
//请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url
url: '/user', // 请求方法同上
method: 'get', // default
// 基础url前缀
baseURL: 'https://some-domain.com/api/',
transformRequest: [function (data) {
// 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装)
data = Qs.stringify({}); // 使用qs可以把参数转化为form-data格式
return data;
}], transformResponse: [function (data) {
// 这里提前处理返回的数据 return data;
}], // 请求头信息
headers: {'X-Requested-With': 'XMLHttpRequest'}, //parameter参数
params: {
ID:
}, //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错
data: {
firstName: 'Fred'
}, //设置超时时间
timeout: ,
//返回数据类型
responseType: 'json', // default }
有了配置文件,我们就可以减少很多额外的处理代码也更优美,直接使用
axios.post(url,{},config)
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
})
//axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。
//下面是关于同时发起多个请求时的处理 axios.all([get1(), get2()])
.then(axios.spread(function (res1, res2) {
// 只有两个请求都完成才会成功,否则会被catch捕获
}));
最后还是说一下配置项,上面讲的是额外配置,如果你不想另外写也可以直接配置全局
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //当然还可以这么配置
var instance = axios.create({
baseURL: 'https://api.example.com'
});
例子1:
axios({
url: '/api/send/test.php?act=mobile',
method: 'POST',
data: {
'mobile_consignee': mobile_consignee,
'mobile_content': mobile_content,
'mobile_sign': mobile_sign
},
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function (response) {
let dataVal = response.data
if (dataVal === ) {
_this.isShow = true
}
})
.catch(function (err) {
console.log(err)
})
备注:
transformRequest上面的例子中,对参数进行了操作,
axios默认的参数是json格式 :
,
如果要
可以使用例子中的配置
例子2:
axios({
url: '/api/send/test.php?act=mobileinfo',
method: 'post',
data: formData,
headers: {'Content-Type': 'multipart/form-data'}
})
.then(function (response) {
let dataVal = response.data
if (dataVal === ) {
_this.isShow = true
}
})
.catch(function (err) {
console.log(err)
})
这个例子中,headers用multipart/form-data,是因为这里面有个参数是file类型
headers默认的是'Content-Type': 'application/x-www-form-urlencoded'
例3:项目中遇到的一个问题,使用axios后,在IE打开是空白,会报错polyfill-eventsource added missing EventSource to window
解决办法:
这是因为IE浏览器不发解析一些ES6语法
安装babel-polyfill和es6-promise
npm install --save-dev babel-polyfill npm install --save-dev es6-promise
在引入axios的地方,加入一行代码 require('es6-promise').polyfill()
项目中,如果在每个引入axios的地方都加入上面的代码太麻烦,我们可以把axios设置到Vue的property上
在main.js
import router from './router'
import axios from 'axios'
Vue.prototype.$http = axios
Vue中
this.$http.post(url,data,{'Content-Type': 'application/x-www-form-urlencoded'})
.then(function (response) {
console.log(response)
})
.catch(function (err) {
console.log(err)
})
axios在跨域请求下,会发送俩次请求,第一次为options,第二次才是真正的请求,这种情况不用管 工作遇到的问题:
1、发送请求的时候,报错Uncaught (in promise) TypeError: Cannot read property 'cancelToken' of undefined
解决办法:
_axios.interceptors.request.use((config) => {
if (config.method === 'post') {
config.data = qs.stringify(config.data) // 添加这个,我也不知道为什么
}
return config
})
axios笔记的更多相关文章
- Vuex笔记/axios笔记
每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存储 ...
- 【转】Vue 2.0封装axios笔记
前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...
- 小范笔记:ASP.NET Core API 基础知识与Axios前端提交数据
跟同事合作前后端分离项目,自己对 WebApi 的很多知识不够全,虽说不必要学全栈,可是也要了解基础知识,才能合理设计接口.API,方便与前端交接. 晚上回到宿舍后,对 WebApi 的知识查漏补缺, ...
- axios学习笔记
axios学习笔记axios文档源地址:https://github.com/axios/axios0.概念axios 在NPM上的描述是:Promise based HTTP client for ...
- Axios源码阅读笔记#1 默认配置项
Promise based HTTP client for the browser and node.js 这是 Axios 的定义,Axios 是基于 Promise,用于HTTP客户端--浏览器和 ...
- axios 学习笔记
官方文档地址:https://github.com/axios/axios axios 是一个基于 Promise 的HTTP库,可以用在浏览器和 node.js 中 特性: • 从浏览器发起 XML ...
- Vue.js 2.x笔记:服务请求axios(8)
1. axios简介 vue2.0之后,推荐使用axios. axios官方地址:https://github.com/axios/axios 2. axios安装 npm安装: npm instal ...
- Vue笔记:使用 axios 中 this 指向问题
问题背景 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined. 如下图所示,我们有一个 login 方法,希望在登录成功之后路由到主页,但通过 this.$r ...
- vue 学习笔记—axios(替代vue-resource)
一.使用 1. 引入CDN的方式 https://unpkg.com/axios@0.16.2/dist/axios.min.js 或者 npm方式 npm install axios --sa ...
随机推荐
- Linux用户管理机制
Linux系统中的用户管理涉及用户账号文件 /etc/passwd.用户密码文件 /etc/shadow.用户组文件 /etc/group. 一.用户账号文件 /etc/passwd 该文件为纯文本文 ...
- js完整教程一 : 基本概念和数组操作
文章提纲 JS相关常识 JS基本概念 实践 总结 JS相关常识 js是一种可以与HTML标记语言混合使用的脚本语言,其编写的程序可以直接在浏览器中解释执行. 一.组成 js是一种专门为网页交互设计的脚 ...
- python singleton design pattern super() 多继承
python singleton design pattern decorate baseclass metaclass import module super() 一.A decorator de ...
- 函数和常用模块【day04】:内置函数分类总结(十一)
重点掌握 字符串格式化format() 字符串格式化百分号 判断 转换 数据类型 帮助信息 map和filter()函数 局部变量全局变量 计算内置函数 常用内置函数(其他) 后续会讲 不常用
- 鸟哥的Linux私房菜——第十七章:Linux 账号与身份管理
视频链接:http://www.bilibili.com/video/av10669732/ 1. Linux 的账号与群组1.1 使用者识别: UID 与 GID1.2 使用者账号:/etc/pas ...
- 怎么使用 JavaScript 将网站后台的数据变化实时更新到前端
实时这个工作现在大体有两种方法一.前端不断地向后台轮询请求数据查询的接口(不管你是用AJAX还是什么)然后将返回的数据重绘在页面上,这以前端页面为主动的方式.二.如果浏览器支持Websocket 那么 ...
- 使用easyui实现双击列表中某个值直接对其进行修改
var editCell = undefined; $('#dg').datagrid({ url:'DwzServlet', iconCls:'icon icon-list' , queryPara ...
- Kafka 0.8 宕机问题排查步骤
CPU 利用率高的排查方法 看看该机器的连接数是不是比其他机器多,监听的端口数:netstat -anlp | wc -l Kafka-0.8的停止和启动 启动: cd /usr/local/kafk ...
- Java 存储和读取 oracle CLOB 类型字段的实用方法
import java.io.BufferedReader; import java.io.IOException; import java.io.Reader; import java.io.Str ...
- Dubbo学习笔记4:服务消费端泛化调用与异步调用
本文借用dubbo.learn的Dubbo API方式来解释原理. 服务消费端泛化调用 前面我们讲解到,基于Spring和基于Dubbo API方式搭建简单的分布式系统时,服务消费端引入了一个SDK二 ...