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'
   .catchfunction(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的更多相关文章

  1. android4.0 HttpClient 以后不能在主线程发起网络请求

    android4.0以后不能在主线程发起网络请求,该异步网络请求. new Thread(new Runnable() { @Override public void run() { // TODO ...

  2. iOS swift HandyJSON组合Alamofire发起网络请求并转换成模型

    在swift开发中,发起网络请求大部分开发者应该都是使用Alamofire发起的网络请求,至于请求完成后JSON解析这一块有很多解决方案,我们今天这里使用HandyJSON来解析请求返回的数据并转化成 ...

  3. 使用axios优雅的发起网络请求

    原文链接:https://www.jianshu.com/p/73585303fdc0 公司项目使用了vue作为技术栈,便理所应当地使用了官方推荐的axios进行网络请求,这里记录下axios的封装方 ...

  4. vue(24)网络请求模块axios使用

    什么是axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 主要的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能. a ...

  5. 木马——本质就是cs socket远程控制,反弹木马是作为c端向外发起网络请求

    摘自:http://kczxsp.hnu.edu.cn/upload/20150504165623705.pdf 里面对于木马的实验过程写得非常清楚,值得一看.   木马是隐藏在正常程序中的具有特殊功 ...

  6. uniapp 发起网络请求

    推荐下我写的uni-http 创建http-config.js import Vue from 'vue' const BASE_URL = 'http://xxx.com'; if (process ...

  7. thinkphp发起网络请求

    常规做法使用CURL方法: private function http_request($url,$data = null,$headers=array()){ $curl = curl_init() ...

  8. 十. Axios网络请求封装

    1. 网络模块的选择 Vue中发送网络请求有非常多的方式,那么在开发中如何选择呢? 选择一:传统的Ajax是基于XMLHttpRequest(XHR) 为什么不用它呢?非常好解释配置和调用方式等非常混 ...

  9. React Native网络请求

    很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...

随机推荐

  1. <每日一题>题目11:以文件夹名称作为参数,返回该文件夹下所有文件的路径

    ''' 分析: 1.知道文件夹名称(假设是形如:E:\\software\\Notepad++),很显然可以通过OS模块去求 2.OS.listdir(sPath),列出文件夹内所有的文件和文件夹,以 ...

  2. LeetCode 38.报数(Python3)

    题目: 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作  "one 1& ...

  3. php访问其他网站接口

    使用函数:  file_get_contents($url); 传入接口url及其参数:如 $url="http://192.168.1.1/test.jsp?id=1&type=2 ...

  4. 2016.8.18上午纪中初中部NOIP普及组比赛

    2016.8.18上午纪中初中部NOIP普及组比赛 链接:https://jzoj.net/junior/#contest/home/1336 翻!车!啦!好吧,那是因为大神归来. 进度: 比赛:AC ...

  5. 19-10-30-Night-V

    看到$\text{V}$就想到了V神. 快快放假.... $\text{Vicetone}$最新单曲$\text{Aftermath}$大家听了嘛…… (真不是学数论之后的意思啊,译为‘后果’,显然是 ...

  6. 在Xsheel Linux上安装nodejs和npm

    最近window系统转向linux系统开发,linux系统的确适合程序员的开发. 作为前端安装了nodejs和npm,遇到了一些坑,赶紧记录下来 第一种安装方法:安装nodejs  : sudo  a ...

  7. jeecms v9 vue-CLI开发环境配置

    vue-CLI开发环境配置 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静 ...

  8. 元素显示v-show

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  9. Django自带的认证系统

    Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...

  10. nginx部署为HTTP代理支持CONNECT模式

    有个软件要走http代理,想着部署nginx起来用,结果发现用不了: 而用ccproxy的话,一切正常: 抓包分析了下,是CONNECT模式的请求 从nginx的官网http://nginx.org/ ...