vue-resource和axios基本使用

2018-09-20

前言

记录下vue-resource和axios两个异步请求插件的基本使用。

vue-resource

异步请求插件，和jQuery中的ajax类似。

The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.

npm介绍：https://www.npmjs.com/package/vue-resource

1.安装

（1）CDN引用

1 2	<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> <script src="https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.min.js"></script>

（2）npm安装

1	npm install vue-resource --save

2.请求API

（1）get(url,[options]) 从服务器拿数据

（2）head(url,[options])

（3）delete(url,[options])

（4）jsonp(url,[options])

（5）post(url,[body],[options]) 提交数据给服务器

（6）put(url,[body],[options])

（7）patch(url,[body],[options])

3.拦截器 interceptors

作用：使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面

基本用法：

Vue.http.interceptors.push((request, next) => {
        // ...
        // 请求发送前的处理逻辑
        // ...
    next((response) => {
        // ...
        // 请求发送后的处理逻辑
        // ...
        // 根据请求的状态，response参数会返回给successCallback或errorCallback
        return response
    })
})

在response返回给successCallback或errorCallback之前，你可以修改response中的内容，或做一些处理。
例如，响应的状态码如果是404，你可以显示友好的404界面。

axios

1.安装

（1）CDN引用

1	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

（2）npm安装

1	npm install axios --save

2.使用

（1）get

axios.get("../package.json",{
          params:{
            userId: "999"
          },
          headers:{
            token: 'whittney'
          },
        }).then(res=>{
          this.msg = res.data;
        }).catch(function (error) {
          console.log(error);
        })

（2）post

axios.post("../package.json",{
          userId:'123'
        },{
          headers:{
            token: 'whittney001'
          }
        }).then(res=>{
          this.msg = res.data;
        }).catch(function (error) {
          console.log(error);
        })

（3）http

axios({
        url: "../package.json",
        method: "get",
        params:{
          userId: "453"
        },
        data:{
          userId : "httptest"
        },
        headers:{
          token: "http-set"
        }
      }).then(res=>{
        this.msg = res.data;
      })

（4）interceptors拦截器

//      拦截请求
      axios.interceptors.request.use(function (config) {
        console.log("request init");
        return config;
      })

//      拦截响应
    axios.interceptors.response.use(function (response) {
      console.log("response init");
      return response;
    })