Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
官方仓库：
中文文档：
axios在项目中(vue)的使用
没有vue项目的的项目即可愉快的看下去了~
如果开发遇到跨域问题可以参考：
安装axios到项目中
npm install axios --save
配置wepack别名，不同环境访问不同的配置接口
使用：import config from 'config'
封装一个axios实例
新建fetch.js,在此创建axios实例与过滤器
若配置了代理。则config.apiBaseUrl则配置代理的前缀即可
import config from 'config'
import axios from 'axios'
// import qs from 'qs';
const instance = axios.create({
baseURL: config.apiBaseUrl, // api的base_url
timeout: 10000,
// 请求超时时间
// transformRequest: data =& qs.stringify(data)
axios默认提交格式为：application/json，转换后提交格式为application/x-www-form-urlencoded
在asp.net core中，需要在action方法上添加[FromBody]接收json格式的数据，正常的都是application/x-www-form-urlencoded故有此修改。
按照使用需要安装qs到项目中,可转换数据格式类型
npm install qs --save
使用qs转换请求对比图
给实例添加拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
// 最后暴露实例
export default instance
实例的调用
若配置了express代理，请求路径为：浏览器-&express开发服务器-----发送请求----&接口服务器
import fetch from 'fetch.js'
url:'/home/data',//完整的请求路径为fetch.js配置的baseURL+/home/data?pageIndex=1
method:'GET',
params:{pageIndex:1}
baseURL:'/api/v1',//完整的请求路径为/api/v1/home/save
url:'/home/save',
method:'POST',
data:{id:1}
阅读(...) 评论()VueJs 搭建Axios接口请求工具
转载 & & 作者：王 二 麻 子
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。今天我们来介绍VueJs 搭建Axios接口请求工具，需要的朋友参考下本文吧
axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
自动转换JSON数据
客户端支持防止 CSRF/XSRF
上一章，我们认识了项目的目录结构，以及对项目的目录结构做了一些调整，已经能把项目重新跑起来了。今天我们来搭建api接口调用工具Axios。Vue本身是不支持ajax调用的，如果你需要这些功能就需要安装对应的工具。
支持ajax请求的工具很多，像superagent和axios。今天我们用的就是axios，因为听说最近网上大部分的教程书籍都使用的是axios，本身axios这个工具就已经做了很好的优化和封装，但是在使用时，还是比较繁琐，所以我们来重新封装一下。
安装Axios工具
cnpm install axios -D&
在安装的时候，一定要切换进入咱们的项目根目录，再运行安装命令，然后如提示以上信息，则表示安装完成。
封装Axios工具
编辑src/api/index.js文件（我们在上一章整理目录结构时，在src/api/目录新建了一个空的index.js文件），现在我们为该文件填写内容。
// 配置API接口地址
var root = 'https://cnodejs.org/api/v1'
// 引用axios
var axios = require('axios')
// 自定义判断元素类型JS
function toType (obj) {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
// 参数过滤函数
function filterNull (o) {
for (var key in o) {
if (o[key] === null) {
delete o[key]
if (toType(o[key]) === 'string') {
o[key] = o[key].trim()
} else if (toType(o[key]) === 'object') {
o[key] = filterNull(o[key])
} else if (toType(o[key]) === 'array') {
o[key] = filterNull(o[key])
接口处理函数
这个函数每个项目都是不一样的，我现在调整的是适用于
https://cnodejs.org/api/v1 的接口，如果是其他接口
需要根据接口的参数进行调整。参考说明文档地址：
https://cnodejs.org/topic/e2d16149fa16bd
主要是，不同的接口的成功标识和失败提示是不一致的。
另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
function apiAxios (method, url, params, success, failure) {
if (params) {
params = filterNull(params)
method: method,
data: method === 'POST' || method === 'PUT' ? params : null,
params: method === 'GET' || method === 'DELETE' ? params : null,
baseURL: root,
withCredentials: false
.then(function (res) {
if (res.data.success === true) {
if (success) {
success(res.data)
if (failure) {
failure(res.data)
window.alert('error: ' + JSON.stringify(res.data))
.catch(function (err) {
let res = err.response
if (err) {
window.alert('api error, HTTP CODE: ' + res.status)
// 返回在vue模板中的调用接口
export default {
get: function (url, params, success, failure) {
return apiAxios('GET', url, params, success, failure)
post: function (url, params, success, failure) {
return apiAxios('POST', url, params, success, failure)
put: function (url, params, success, failure) {
return apiAxios('PUT', url, params, success, failure)
delete: function (url, params, success, failure) {
return apiAxios('DELETE', url, params, success, failure)
更多关于AxIos的解释请参见：
配置Axios工具
我们在使用之前，需要在src/main.js中进行简单的配置，先来看一下原始的main.js文件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
el: '#app',
template: '&App/&',
components: { App }
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api
Vue.config.productionTip = false
/* eslint-disable no-new */
el: '#app',
template: '&App/&',
components: { App }
通过以上的配置，我们就可以在项目中使用axios工具了，接下来我们来测试一下这个工具。
使用Axios工具
我们来修改一下 src/page/Index.vue 文件，将代码调整为以下代码：
&template&
&div&index page&/div&
&/template&
export default {
created () {
this.$api.get('topics', null, r =& {
console.log(r)
我们在Index.vue中向浏览器的控制台输入一些接口请求到的数据，如果你和我也一样，那说明我们的接口配置完成正确。如下图：
如果你是按我的操作一步一步来，那最终结果应该和我一样。如果出错请仔细检查代码。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具项目中安装axios
cnpm install axios -S
每个需要请求的组件中都需要引入axios，如果觉得麻烦，可以axios改写成Vue的原型属性，在使用的时候，就不需要每个组件都去引用。
将axios改写成Vue的原型属性
1、在main.js中引入axios
& & & import axios from 'axios'
2、写成vue的原型属性
　　Vue.prototype.$ajax = axios
在main.js中添加这两行代码之后，就能直接在组件中使用axios了
this.$ajax.post(url,params).then(function (response) {　　//请求成功}).catch(function (error) {　　//请求失败});
假设我们需要请求的接口是：**************
如果是开发环境，我们请求的接口如果存在跨域问题，需要配置代理
在vue-cli的config文件下面的index.js里有一个参数叫proxyTable
配置proxyTable的时候本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。
具体配置代码：
// 配置代理&
proxyTable: {& & &'/apis':{// ‘/apis’的别名& & & & &target:'http://120.**.**.**:**',//target指的是要代理的url & & & & &changeOrigin:true, //是否跨域& & & & pathRewrite:{& & & & & & &'^/apis':'' //需要rewrite重写& & & & }& & }
组件中请求的具体代码：
this.$ajax.post('/apis/*********', qs.stringify({　　//这里是传参数})).then(function (response) {　　console.log(response)}).catch(function (error) {　　console.log(error);});
在vue2中使用axios，我们请求的参数仍为json类型，是并没有序列化的。我们需要使用querystring解决该问题
需要先引入 &import qs from 'qs';
传入参数的时候转下格式，qs.stringify(data)
这样，我们就能正常请求访问到数据了。
生成环境下，生产代码应该使用npm run build然后把dist放到nginx服务器上，在nginx上配置代理地址。
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
1.我现在想调用一个接口后，紧接着用第一个接口的值调用第二个接口，正确的写法是这样的吗？
2.连着写then，最后的catch是取谁的？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用async/await吧，解决嵌套回调调用，更优雅一点。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
正确不正确你一试便知，另外只要有其中一个报错就会catch到，不针对其中某一个
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你可以使用async做流程控制
# 安装方式
npm install async --save
题主的问题适合用：waterfall(tasks, [callback])
waterfall方法用于依次执行多个方法，一个方法执行完毕后才会进入下一方法，waterfall的多个方法只能以数组形式传入，不支持object对象。前一个函数的输出做为下一个函数的输入参数
async.waterfall([
function(callback) {
callback(null, 1);
function(arg1, callback) {
console.log(arg1); // 1
callback(null, 2);
], function (err, result) {
// 执行的任务中方法回调err参数时，将被传递至本方法的err参数
// 参数result为最后一个方法的回调结果'done'
console.log(result) // 2
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
写是可以这么写。但是返回的顺序还是不一定的。并不能保证第二个then的回调就一定第一个then之后返回。
所以呢，如果你一定要保证在拿到第一个then的返回后再去发送第二次请求，在现有技术的条件下可以这样
axios.get('url')
.then(res =& {
axios.get('url2').then()
你要觉得这样写难看，可以自己封装下嘛，大致是这样
function axiosGet(url, param, cb) {
if (typeof param === 'function') {
cb = param
param = ''
axios.get(url + param).then(res =& {
if (cb) { cb(res) }
axiosGet('url1', function(res) {
axiosGet('url2', function(res) {
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
axios.get(url1).then(rsp =& {
return axios.get(url2)
}).then(rsp =& {
return axios.get(url3)
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
以上给出的方法都很丰富了，我再补充一个个人习惯使用的方法吧，那就是使用 ,实例如下：
Promise.all([
axios.get(url1),
axios.get(url2)
]).then(res =& {})
.catch(err =& {});
这样其中任何一个请求出错，catch就会执行。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。5-vuejs2.0实战：仿豆瓣app项目：axios的简单使用 - 简书
5-vuejs2.0实战：仿豆瓣app项目：axios的简单使用
由于项目中用到了豆瓣api,涉及到跨域访问，就需要在config的index.js添加代理,例如
proxyTable: {
target: 'https://api.douban.com/v2',
changeOrigin: true,
pathRewrite: {
'^/api': ''
npm install --save axios vue-axios
在main.js引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
在各个组件里获取数据，就是这么简单
this.axios.get(api).then((response) =& {
console.log(response.data)
由于豆瓣app首页的数据，我们不能直接通过api获取数据，只能先将数据保存下来进行访问，大家做项目的时候，访问静态数据json会遇到路径404，这里我们可以通过在dev-server.js里添加静态数据的路由，例如：我们先将豆瓣的首页数据先保存到/src/data/homeData.json,
dev-server.js 添加
//添加静态数据路由
var app = express()
var homeData=require('../src/data/homeData.json');
var apiRoutes = express.Router();
apiRoutes.get('/homeData',function (req,res) {
res.json({
data:homeData
app.use('/api',apiRoutes);
在组件里面访问
this.axios.get('/api/homeData').then((response) =& {
console.log(response.data)
数据就出来了
Paste_Image.png
接下来我们将静态数据显示到首页中：静态数据分为热门和推荐，我么先fetchData获取数据，通过判断card.name，赋值给recommendData、hotData
recommendData: [],
hotData: []
created() {
this.fetchData();
methods: {
fetchData() {
this.axios.get('/api/homeData').then((response) =& {
let data = response.data.data.recommend_
let recommend = [];
let hot = [];
for (var i in data) {
if (data[i].card && data[i].card.name == '为你推荐') {
recommend.push(data[i]);
hot.push(data[i]);
this.recommendData =
this.hotData =
在index.vue循环media-cell组件
&m-cell-media :author="item.target.author.name" :column="item.source_cn" :img="item.target.cover_url" v-for="(item,index) in hotData"
:key="item.id"&
&span slot="title"&{{item.title}}&/span&
&span slot="describe"&{{item.target.desc}}&/span&
&/m-cell-media&
Paste_Image.png
vue专题目录：
ui设计师，热爱前端及thinkphp
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
用到的组件1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SDWebImage多个缩略图缓存组件 UICKeyChainStore存放用户账号密码组件 Reachability监测网络状态 DateTools友好...
发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注
09:45字数 61697阅读 3316评论 2喜欢 85 用到的组件 1、通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FM...
用到的组件1、通过CocoaPods安装项目名称项目信息AFNetworking网络请求组件FMDB本地数据库组件SDWebImage多个缩略图缓存组件UICKeyChainStore存放用户账号密码组件Reachability监测网络状态DateTools友好化时间MBP...
今天又看了很多人的面经，无形中感觉到了深深的压力，面对自己仍然非常不足的个人能力，看到人家的努力，不断的在内心问自己，你比别人差吗？你不能突破一次自己吗？你愿意找不到一份好的工作吗？ 其实做前端开发这条路和任意一条编程之路一样，都不会那么顺利，我相信很多人在这条路上都遇到过...
择安全的外汇交易平台？ 近来常有读者和小编交流，就如何选择合适的平台这一永恒话题进行探讨。特别是代理商这一块，对平台的选择重视程度，要大于普通交易者。在普通的交易者看起来，只要平台商安全，能流畅交易，平台商之间的差别无外乎是点差和成本的区别。但是实际情况却比这复杂很多。今天...
旅行本身就是规则之一。 找一个假期，拼凑着年假，混合着双休日。你宣布要去旅行。部门伙伴按照剧本做出好奇以及艳羡的姿态，问你一些汇率，签证以及路线的问题。去过的一定要给你一些tips，最好是网络上面任何攻略都不会提示的，是对你有针对性的建议。这样，他就变成一个专家以及懂得呵护...
清晨 拉开了多少帘子 让阳光 从铝合金的缝隙挤进 混着咖啡味的空气 路上多少人 来来往往 赶向只有自己知道的地方 至于雨滴或春天 就顺着尼龙的伞布流去 流进下水道，汇入 这个她们早已陌生的世界 在那个世界上 有人相爱 有人相憎 有人在聚光灯下到来 有人在蜂鸣器的长鸣中离去 ...
EventBus用法及源码解析目录介绍1.EventBus简介1.1 EventBus的三要素1.2 EventBus的四种ThreadMode（线程模型）1.3 EventBus怎么调用2.EventBus使用2.1 最简单的使用3.EventBus注册源码解析3.1 E...}