参考:http://www.cnblogs.com/Upton/p/6180512.html

https://cloud.tencent.com/developer/article/1098141  这个不错

官方文档:https://github.com/axios

首先就是引入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笔记的更多相关文章

  1. Vuex笔记/axios笔记

    每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存储 ...

  2. 【转】Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...

  3. 小范笔记:ASP.NET Core API 基础知识与Axios前端提交数据

    跟同事合作前后端分离项目,自己对 WebApi 的很多知识不够全,虽说不必要学全栈,可是也要了解基础知识,才能合理设计接口.API,方便与前端交接. 晚上回到宿舍后,对 WebApi 的知识查漏补缺, ...

  4. axios学习笔记

    axios学习笔记axios文档源地址:https://github.com/axios/axios0.概念axios 在NPM上的描述是:Promise based HTTP client for ...

  5. Axios源码阅读笔记#1 默认配置项

    Promise based HTTP client for the browser and node.js 这是 Axios 的定义,Axios 是基于 Promise,用于HTTP客户端--浏览器和 ...

  6. axios 学习笔记

    官方文档地址:https://github.com/axios/axios axios 是一个基于 Promise 的HTTP库,可以用在浏览器和 node.js 中 特性: • 从浏览器发起 XML ...

  7. Vue.js 2.x笔记:服务请求axios(8)

    1. axios简介 vue2.0之后,推荐使用axios. axios官方地址:https://github.com/axios/axios 2. axios安装 npm安装: npm instal ...

  8. Vue笔记:使用 axios 中 this 指向问题

    问题背景 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined. 如下图所示,我们有一个 login 方法,希望在登录成功之后路由到主页,但通过 this.$r ...

  9. vue 学习笔记—axios(替代vue-resource)

    一.使用 1. 引入CDN的方式   https://unpkg.com/axios@0.16.2/dist/axios.min.js  或者 npm方式 npm install axios --sa ...

随机推荐

  1. Linux用户管理机制

    Linux系统中的用户管理涉及用户账号文件 /etc/passwd.用户密码文件 /etc/shadow.用户组文件 /etc/group. 一.用户账号文件 /etc/passwd 该文件为纯文本文 ...

  2. js完整教程一 : 基本概念和数组操作

    文章提纲 JS相关常识 JS基本概念 实践 总结 JS相关常识 js是一种可以与HTML标记语言混合使用的脚本语言,其编写的程序可以直接在浏览器中解释执行. 一.组成 js是一种专门为网页交互设计的脚 ...

  3. python singleton design pattern super() 多继承

    python  singleton design pattern decorate baseclass metaclass import module super() 一.A decorator de ...

  4. 函数和常用模块【day04】:内置函数分类总结(十一)

    重点掌握 字符串格式化format() 字符串格式化百分号 判断 转换 数据类型 帮助信息 map和filter()函数 局部变量全局变量 计算内置函数 常用内置函数(其他) 后续会讲 不常用

  5. 鸟哥的Linux私房菜——第十七章:Linux 账号与身份管理

    视频链接:http://www.bilibili.com/video/av10669732/ 1. Linux 的账号与群组1.1 使用者识别: UID 与 GID1.2 使用者账号:/etc/pas ...

  6. 怎么使用 JavaScript 将网站后台的数据变化实时更新到前端

    实时这个工作现在大体有两种方法一.前端不断地向后台轮询请求数据查询的接口(不管你是用AJAX还是什么)然后将返回的数据重绘在页面上,这以前端页面为主动的方式.二.如果浏览器支持Websocket 那么 ...

  7. 使用easyui实现双击列表中某个值直接对其进行修改

    var editCell = undefined; $('#dg').datagrid({ url:'DwzServlet', iconCls:'icon icon-list' , queryPara ...

  8. Kafka 0.8 宕机问题排查步骤

    CPU 利用率高的排查方法 看看该机器的连接数是不是比其他机器多,监听的端口数:netstat -anlp | wc -l Kafka-0.8的停止和启动 启动: cd /usr/local/kafk ...

  9. Java 存储和读取 oracle CLOB 类型字段的实用方法

    import java.io.BufferedReader; import java.io.IOException; import java.io.Reader; import java.io.Str ...

  10. Dubbo学习笔记4:服务消费端泛化调用与异步调用

    本文借用dubbo.learn的Dubbo API方式来解释原理. 服务消费端泛化调用 前面我们讲解到,基于Spring和基于Dubbo API方式搭建简单的分布式系统时,服务消费端引入了一个SDK二 ...