vue 如何发起网络请求 之 axios

// axios 请求  在main.js里边写入

import Axios from \'axios\'

// 配置请求信息

var $http = Axios.create({

  baseURL: \'配置路径\',

  timeout: \'3000\',  //超时时间

  headers: {\'X-Custom-Header\': \'foobar\'}  //请求头

})

Vue.prototype.$http = $http

// 方法调用,回调，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  结果一样

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时拒绝

   }}

}）