Axios 是一个基于 promise 的 HTTP 库

vue项目中关于axios的简单使用

axios介绍

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
官方仓库:https://github.com/axios/axios
中文文档:https://www.kancloud.cn/yunye/axios/234845

axios在项目中(vue)的使用

没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~
如果开发遇到跨域问题可以参考:http://www.cnblogs.com/morang/p/8423763.html

安装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'
//get
fetch({
url:'/home/data',//完整的请求路径为fetch.js配置的baseURL+/home/data?pageIndex=1
method:'GET',
params:{pageIndex:1}
})
//post
fetch({
baseURL:'/api/v1',//完整的请求路径为/api/v1/home/save
url:'/home/save',
method:'POST',
data:{id:1}
})

作者:易墨 
个人小站:http://www.yimo.link

Axios 是一个基于 promise 的 HTTP 库的更多相关文章

  1. Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户 ...

  2. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

  3. 手把手做一个基于vue-cli的组件库(上篇)

    基于vue-cli4的ui组件库,先贴个最终效果吧,步骤有点多,准备分上下篇,上篇:如何做一个初步的组件.下篇:编写说明文档及页面优化.开工. GitHub源码地址:https://github.co ...

  4. 准备开发一个基于canvas的图表库,记录一些东西(一)

    开源的图表库已经有很多了,这里从头写个自己的,主要还是 提高自己js的水平,增加复杂代码组织的经验 首先写一个画图的库,供以后画图表使用.经过2天的开发,算是能拿出点东西了,虽然功能还很弱,但是有了一 ...

  5. 菜渣开源一个基于 EMIT 的 AOP 库(.NET Core)

    目录 1,快速入门 1.1 继承 ActionAttribute 特性 1.2 标记代理类型 2,如何创建代理类型 2.1 通过API直接创建 2,创建代理类型 通过API 通过 Microsoft. ...

  6. 手把手做一个基于vue-cli的组件库(下篇)

    基于vue-cli4的ui组件库,上篇:如何做一个初步的组件.下篇:编写说明文档及页面优化.接上篇,开工. GitHub源码地址:https://github.com/sq-github/sq-ui ...

  7. 新做的一个基于OPENGL的gui库

    #include <BGE/All> ,text);     button->setName(name);     button->setSize(Vector2f(,)); ...

  8. 基于promise用于浏览器和node.js的http客户端的axios

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支 ...

  9. axios - 基于 Promise 的 HTTP 异步请求库

    axios 是基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用.Vue 更新到2.0之后,作者就宣告不再对 vue-resource 模块更新,而是推荐使用 a ...

随机推荐

  1. 【题解】 [HEOI2016]排序题解 (二分答案,线段树)

    题目描述 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这个全排列序列进行 ...

  2. 【BZOJ1432】[ZJOI2009]Function(找规律)

    [BZOJ1432][ZJOI2009]Function(找规律) 题面 BZOJ 洛谷 题解 这...找找规律吧. #include<iostream> using namespace ...

  3. 【CF605E】Intergalaxy Trips(贪心,动态规划)

    [CF605E]Intergalaxy Trips(贪心,动态规划) 题面 Codeforces 洛谷 有\(n\)个点,每个时刻第\(i\)个点和第\(j\)个点之间有\(p_{ij}\)的概率存在 ...

  4. 李建20181029课时整理(NOIP考点)

    历年真题 数学题: 数论(exgcd 逆元,CRT,EXCRT,快速幂,线性筛 ,杜教筛)排列组合 概率期望(什么东西) C(n,m) = 逆元? 分解质因数? Ti(大质数的类似物)思考技巧分解质因 ...

  5. 【LOJ#10131】暗的锁链

    题目大意:给定一个 N 个点无向图的一棵生成树和另外 M 条边,第一次去掉生成树中的一条边,第二次去掉另外 M 条边中的一条边,求有多少种情况可以使得给定的无向图不连通. 题解:首先考虑该生成树,若新 ...

  6. MathExam V2.0

    # 隔壁村小学的小朋友都羡慕哭了2.0版 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 1 ...

  7. o2o优惠券使用预测

    前沿: 这是天池的一个新人实战塞题目,原址 https://tianchi.aliyun.com/getStart/information.htm?spm=5176.100067.5678.2.e13 ...

  8. Python 内置变量

    Python 隐藏变量 __doc__ # 表示本文件的注释__file__ # 表示本文件的路径 __package__ # 导入的py文件所在的文件夹路径__cached__ # 导入文件的缓存_ ...

  9. POJ - 1094 Sorting It All Out(拓扑排序)

    https://vjudge.net/problem/POJ-1094 题意 对于N个大写字母,给定它们的一些关系,要求判断出经过多少个关系之后可以确定它们的排序或者排序存在冲突,或者所有的偏序关系用 ...

  10. [iOS]Xcode处理过时方法的警告

    ####强迫症的福利, 有的时候, 我们特别讨厌Xcode中的代码警告, 以下就是遇到各种警告的时候的处理方法:(后续会一直更新) 产生警告的原因: 某些方法废弃了, 会产生警告! 样式: 处理方法: ...