网站首页 » 前端开发 » Vue » Vue2 axios 服务器通信
上一篇:
下一篇:

Vue2 axios 服务器通信

前言

是想使用 axios 我们不可避免地要跟数据打交道,所以在这里我们得做一些请求接口来模拟数据的请求,这里我们使用 easy-mock,类似的工具还有 JSONPlaceholder 不过 JSONPlaceholder 相对来说会比较麻烦一些,我也没有用过,easy-mock 非常容易上手,你只需要到官方网站中注册一个帐号,然后就可以新建一些接口了。至于怎么新建可以看官方文档教程,在这里不多说。

vue axios 之旅

首先在使用 axios 之前,我们需要安装下,执行如下命令行进行安装:

npm install axios --save

安装完后,准备工作已经完成。现在我们来看看如何使用它。

首先在使用的页面中引入它,在本例子中,我们在 App.vue 中使用:

import axios from "axios";

引入完之后就可以尽情地使用 axios 了,关于 axios 的详细用法,你可以访问这里 https://www.npmjs.com/package/axios

基本用法

一个简单的 axios 请求示例:

get 请求
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  componentName: "App",
  created() {
    axios({
      method: "get",
      url:
        "https://easy-mock.com/mock/5aa5424e22dafa042a4c732c/axios/getUserList"
    })
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

查看浏览器 Network 可以看到类似如下信息:

vue axios 服务器通信 get 请求

跟 jquery 中的 ajax 请求差不多。除了 get 方法,我们还要以使用 post 方式提交数据

post 请求
created() {
  axios({
    method: "post",
    url:
      "https://easy-mock.com/mock/5aa5424e22dafa042a4c732c/axios/postUserList"
  })
    .then(response => {
      console.log(response);
    })
    .catch(error => {
      console.log(error);
    });
}

查看浏览器 Network 可以看到类似如下信息:

vue axios 服务器通信 post 请求

直观写法

除了上面的写法外,官方还为我们提供了更为直观的方法:

axios.get() 方法
axios
  .get(
    "https://easy-mock.com/mock/5aa5424e22dafa042a4c732c/axios/getUserList"
  )
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

post 的写法也差不多,只需要把 axios.get() 改成 axios.post() 就可以了。

请求时传递参数:

传递参数
axios.get("https://easy-mock.com/mock/5aa5424e22dafa042a4c732c/axios/getUserList",
    {
      params: {
        id: 666,
        type: "large"
      }
    }
  )
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

查看浏览器 Network 可以看到类似如下信息:

vue axios 参数传递

请求数据配置

在实践的开发当中,不管是 get 请求还是 post 请求,有一些配置项是一样的,比如:请求的服务地址,又或者说请求后,需要统计处理返回来的结果等,因为这些都是一样的配置,所以我们可以写一份通用的请求配置:我们不妨把这个配置项放到一个单独的文件中,在需要使用时,就引入进来。

App.vue
import axios from "axios";
import { BaseService, Source } from "@/resources/BaseService";
export default {
  name: "App",
  componentName: "App",
  created() {
    BaseService.post("postUserList", {
      name: "yunkus",
      url: "yunkus.com"
    })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
    Source.cancel("请求被人为取消了");
  }
};
BaseService.js
import axios from "axios"
import queryString from "queryString"

let CancelToken = axios.CancelToken;
let Source = CancelToken.source();

let BaseService = axios.create({
  baseURL: "https://easy-mock.com/mock/5aa5424e22dafa042a4c732c/axios/",
  timeout: 1000, // 设置超时时间,若请求超过这个时间,那么就返回请求超时的错误(Error: timeout of 1ms exceeded)
  responseType: "json",
  params: {},
  headers: {
    "content-type": "application/x-www-form-urlencoded"
  },
  // transformRequest 和 transformResponse 只适用于 put、post、patch 请求。
  transformRequest: [function (request) {
    // 给请求数据添加属性
    request.color = "blue";
    // 如果添加了 transformRequest ,那么一定要返回,即使数据不作任何处理。
    return queryString.stringify(request); // 转换成用 & 连接参数的字符串
  }],
  transformResponse: [function (response) {
    response.color = "red";
    // 如果添加了 transformResponse ,同样的这里也一定要返回
    return response;
  }],
  validateStatus(status) {
    console.log(status);
    // 在这里写状态码的处理逻辑
    return status
  },
  cancelToken: Source.taken
});

export {
  BaseService,
  Source
};

但这里有一个奇怪的地方,上面代码中的 Source.cancel(“请求被人为取消了”);  无效,这是为什么?

axios 并发请求

App.vue
import axios from "axios";
import { BaseService, Source } from "@/resources/BaseService";
export default {
  name: "App",
  componentName: "App",
  created() {
    function bs1() {
      return BaseService.get("getUserList");
    }
    function bs2() {
      return BaseService.post("postUserList");
    }
    axios
      .all([bs1(), bs2()])
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  }
};

BaseService.js 稍微改下,改成下面这样:

BaseService.js
import axios from "axios"
import queryString from "queryString"

let CancelToken = axios.CancelToken;
let Source = CancelToken.source();

let BaseService = axios.create({
  baseURL: "https://easy-mock.com/mock/5aa5424e22dafa042a4c732c/axios/",
  timeout: 1000, // 设置超时时间,若请求超过这个时间,那么就返回请求超时的错误(Error: timeout of 1ms exceeded)
  responseType: "json",
  params: {},
  headers: {
    "content-type": "application/x-www-form-urlencoded"
  }
});
export {
  BaseService,
  Source
};

不过如果是用上面的写法,那么会把两个请求返回来的结果放到一个数组中:

vue axios 并发请求

除了上面的那种写法,我们还可以使用 axios 官方提供的一个 spread() 方法,把返回来的结果分开来。

App.vue
import axios from "axios";
import { BaseService, Source } from "@/resources/BaseService";
export default {
  name: "App",
  componentName: "App",
  created() {
    function bs1() {
      return BaseService.get("getUserList");
    }
    function bs2() {
      return BaseService.post("postUserList");
    }
    axios
      .all([bs1(), bs2()])
      .then(
        axios.spread((response1, response2) => {
          console.log(response1);
          console.log(response2);
        })
      )
      .catch(error => {
        console.log(error);
      });
  }
};

axios 拦截器

BaseService.js
import axios from "axios"
import queryString from "queryString"

let BaseService = axios.create({
  baseURL: "https://easy-mock.com/mock/5aa5424e22dafa042a4c732c/axios/",
  timeout: 1000, // 设置超时时间,若请求超过这个时间,那么就返回请求超时的错误(Error: timeout of 1ms exceeded)
  responseType: "json",
  params: {},
  headers: {
    "content-type": "application/x-www-form-urlencoded"
  }
});
BaseService.interceptors.request.use(function (conifg) {
  console.log("请求被拦截啦!");
  console.log(conifg);
  return conifg; // 这里也必需要返回,不然就不会发送请求了
}, function (error) {
  return Promise.reject(error);
});
BaseService.interceptors.response.use(function (data) {
  console.log("响应被拦截啦!");
  console.log(data);
  return data; // 同样的这里也必需要返回,不然就不会返回取到的数据了
}, function (error) {
  return Promise.reject(error);
})
export {
  BaseService,
  Source
};

上面我们只对 BaseService 中的请求进行拦截,也算是属于全局拦截了。运行后可以在控制台中看到如下结果:

axios 请求拦截

对于局部拦截的话,我们可以通过对应的 axios 实例添加上面的拦截代码。

axios 与 vue-axios 配合使用

如果我们在项目中只使用 axios 的话,那么我们都需要在每个有 axios 请求的组件中引入 axios 。这多多少少会增一些重复代码,这不,我们可以再安装一个 vue-axios 。它可以让我们像 router 那样把 axios 当成插件使用。然后我们就可以通过组件当前的实例来调用 axios 中的一些方法了。

安装 vue-axios

npm install vue-axios --save

安装完后,在 main.js 中添加如下代码,让 axios 作为插件供全局使用:

main.js
import Vue from 'vue'
import App from './App'
import router from './router'

import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)

Vue.config.productionTip = false

/* eslint-disable no-new */
let vm = new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})

然后我们就可以在其它组件中通过形如 this.$http.get() 的方式来使用了:

App.vue
export default {
  name: "App",
  componentName: "App",
  created() {
    this.$http
      .get("https://easy-mock.com/mock/5aa5424e22dafa042a4c732c/axios/getUserList")
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  }
};

到这里 axios 之旅已经接近尾声。

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-axios/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END