vue 如何发起网络请求 之 axios
1
|
|
1
2
3
4
5
6
7
8
9
10
|
// axios 请求 在main.js里边写入 import Axios from 'axios' // 配置请求信息 var $http = Axios.create({ baseURL: '配置路径' , timeout: '3000' , //超时时间 headers: { 'X-Custom-Header' : 'foobar' } //请求头 }) Vue.prototype.$http = $http |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 方法调用,回调,post , 基于es6 promise methods: { getNum: function () { var data = { TenantID: "0" } this .$http.post( "请求路径-方法1" , data ) .then(res => { console.log(res) //返回方法1的值 var data1 = { TenantID: res.data.Code } //方法1 的返回值作为参数传递 res.data.Code this .$http.post( "请求路径-方法2" , data1 ) .then(res1 => { console.log(res.data) //同样可以使用方法1的返回值 console.log(res1) //返回方法2的值 }) }) . catch ( function (error) { console.log(error) }) } //需要使用箭头函数,否则 this.$http 中的this 指向window,会报 $http undefined //另外也可以在当前组件 import axios from 'axios' 引入axios 包 //将 this.$http 替换 为 axios 结果一样 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
axios 拦截器 你可以截取请求或响应在被 then 或者 catch 处理之前 //添加请求拦截器 axios.interceptors.request.use( function (config){ //在发送请求之前做某事 return config; }, function (error){ //请求错误时做些事 return Promise.reject(error); }); //添加响应拦截器 axios.interceptors.response.use( function (response){ //对响应数据做些事 return response; }, function (error){ //请求错误时做些事 return Promise.reject(error); });<br> 以后可能需要删除拦截器。 var myInterceptor = axios.interceptors.request.use( function () { /*...*/ }); axios.interceptors.request.eject(myInterceptor);<br> 你可以将拦截器添加到axios的自定义实例。 var instance = axios.create(); instance.interceptors.request.use( function () { /*...*/ });<br> 处理错误 axios.get( '/ user / 12345' ) . catch ( function (error){ if (error.response){ //请求已发出,但服务器使用状态代码进行响应 //落在2xx的范围之外 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else { //在设置触发错误的请求时发生了错误 console.log( 'Error' ,error.message); }} console.log(error.config); }); 您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。 axios.get( '/ user / 12345' ,{ validateStatus: function (status){ return status < 500; //仅当状态代码大于或等于500时拒绝 }} }) |
vue 如何发起网络请求 之 axios的更多相关文章
- android4.0 HttpClient 以后不能在主线程发起网络请求
android4.0以后不能在主线程发起网络请求,该异步网络请求. new Thread(new Runnable() { @Override public void run() { // TODO ...
- iOS swift HandyJSON组合Alamofire发起网络请求并转换成模型
在swift开发中,发起网络请求大部分开发者应该都是使用Alamofire发起的网络请求,至于请求完成后JSON解析这一块有很多解决方案,我们今天这里使用HandyJSON来解析请求返回的数据并转化成 ...
- 使用axios优雅的发起网络请求
原文链接:https://www.jianshu.com/p/73585303fdc0 公司项目使用了vue作为技术栈,便理所应当地使用了官方推荐的axios进行网络请求,这里记录下axios的封装方 ...
- vue(24)网络请求模块axios使用
什么是axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 主要的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能. a ...
- 木马——本质就是cs socket远程控制,反弹木马是作为c端向外发起网络请求
摘自:http://kczxsp.hnu.edu.cn/upload/20150504165623705.pdf 里面对于木马的实验过程写得非常清楚,值得一看. 木马是隐藏在正常程序中的具有特殊功 ...
- uniapp 发起网络请求
推荐下我写的uni-http 创建http-config.js import Vue from 'vue' const BASE_URL = 'http://xxx.com'; if (process ...
- thinkphp发起网络请求
常规做法使用CURL方法: private function http_request($url,$data = null,$headers=array()){ $curl = curl_init() ...
- 十. Axios网络请求封装
1. 网络模块的选择 Vue中发送网络请求有非常多的方式,那么在开发中如何选择呢? 选择一:传统的Ajax是基于XMLHttpRequest(XHR) 为什么不用它呢?非常好解释配置和调用方式等非常混 ...
- React Native网络请求
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...
随机推荐
- <每日一题>题目11:以文件夹名称作为参数,返回该文件夹下所有文件的路径
''' 分析: 1.知道文件夹名称(假设是形如:E:\\software\\Notepad++),很显然可以通过OS模块去求 2.OS.listdir(sPath),列出文件夹内所有的文件和文件夹,以 ...
- LeetCode 38.报数(Python3)
题目: 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作 "one 1& ...
- php访问其他网站接口
使用函数: file_get_contents($url); 传入接口url及其参数:如 $url="http://192.168.1.1/test.jsp?id=1&type=2 ...
- 2016.8.18上午纪中初中部NOIP普及组比赛
2016.8.18上午纪中初中部NOIP普及组比赛 链接:https://jzoj.net/junior/#contest/home/1336 翻!车!啦!好吧,那是因为大神归来. 进度: 比赛:AC ...
- 19-10-30-Night-V
看到$\text{V}$就想到了V神. 快快放假.... $\text{Vicetone}$最新单曲$\text{Aftermath}$大家听了嘛…… (真不是学数论之后的意思啊,译为‘后果’,显然是 ...
- 在Xsheel Linux上安装nodejs和npm
最近window系统转向linux系统开发,linux系统的确适合程序员的开发. 作为前端安装了nodejs和npm,遇到了一些坑,赶紧记录下来 第一种安装方法:安装nodejs : sudo a ...
- jeecms v9 vue-CLI开发环境配置
vue-CLI开发环境配置 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静 ...
- 元素显示v-show
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- Django自带的认证系统
Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...
- nginx部署为HTTP代理支持CONNECT模式
有个软件要走http代理,想着部署nginx起来用,结果发现用不了: 而用ccproxy的话,一切正常: 抓包分析了下,是CONNECT模式的请求 从nginx的官网http://nginx.org/ ...