Vue合理配置axios并在项目中进行实际应用

想的越多,心里越烦躁,趁着有限的时间,学自己想学的东西,做自己想做的事情。

前言

网上关于axios详解、配置等等的教程文章有很多,大部分都是高大上的源码解析,没有实际应用的一些分享,本篇文章以实际应用为主,希望能帮助到大家。

安装依赖

本文中使用的是 Vue CLI3.0 ,安装依赖使用vue add命令进行

  • axios安装
vue add axios
    # yarn | npm安装
    yarn add axios | npm install axios
复制代码
  • 引用插件 执行 add 命令后,CLI会自动帮我们在main.js中引用它,并做一些默认配置。接下来,带大家看一下,add命令都做了那些事情

    • src下新建了一个plugins文件夹,这个文件夹用于存放Vue引入插件的相关 配置文件
    • 在plugins文件夹中,新建了axios.js文件
    • 在package.json文件中添加了 axios 的依赖信息以及版本号(yarn | npm安装时会自动做这一步)
    • main.js 中导入了axios的配置文件,方便全局使用axios
  • 使用插件

this.axios.${方法名}.then().catch()
// 例子
this.axios.get(url,requestData).then((res)=>{
    // 成功的回调
}).catch((err)=>{
    // 失败的回调
});

/*
    支持所有http请求以及请求取消、并发请求等功能,更多细节以及使用方法移步官方文档
    文档: http://www.axios-js.com/zh-cn/docs/
*/
复制代码

配置axios

接下来回到本文的重点,如何去合理的配置它以提高开发效率。本篇配置基于脚手架创建的axios.js进行修改

  • 创建配置文件 如果使用脚手架进行安装axios,将会在在src目录下查找plugins文件夹,并在plugins文件夹下创建axios.js文件。如果使用yarn方式安装,请手动创建plugins文件夹以及对应的js文件。

  • 配置文件代码

    每一个步骤都有注释,很详细,开发者仔细阅读即可理解。

    "use strict";
    
    import Vue from 'vue';
    import axios from "axios";
    // 设置baseURL
    axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || 'https://www.kaisir.cn';
    // 请求头添加token
    axios.defaults.headers.common['Authorization'] = "";
    // 设置get请求头
    axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    // 设置post请求头
    axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
    
    let config = {
      baseURL: "localhost/user",
      // 请求超时时间
      timeout: 60 * 1000,
      // 跨域请求时是否需要凭证
      // withCredentials: true, // Check cross-site Access-Control
    };
    
    // 根据环境当前变量更改baseURL
    switch (process.env.NODE_ENV) {
      case 'development':
        // 开发环境
        config.baseURL = "https://www.kaisir.cn/user";
        break;
      case 'production':
        // 生产环境
        config.baseURL = "https://www.kaisir.cn/api";
    }
    
    const _axios = axios.create(config);
    // 请求拦截器
    _axios.interceptors.request.use(
      function(config) {
        // Do something before request is sent
        return config;
      },
      function(error) {
        // Do something with request error
        error.data = {};
        error.data.msg = "服务器异常";
        return Promise.reject(error);
      }
    );
    
    // 响应拦截器
    _axios.interceptors.response.use(
      function(response) {
        // Do something with response data
        return response;
      },
      function(error) {
        // Do something with response error
        error.data = {};
        error.data.msg = "请求超时或服务器异常";
        return Promise.reject(error);
      }
    );
    
    // eslint-disable-next-line no-unused-vars
    Plugin.install = function(Vue, options) {
      Vue.axios = _axios;
      window.axios = _axios;
      Object.defineProperties(Vue.prototype, {
        axios: {
          get() {
            return _axios;
          }
        },
        $axios: {
          get() {
            return _axios;
          }
        },
      });
    };
    
    Vue.use(Plugin);
    
    export default Plugin;
    
    复制代码
  • 在入口文件中进行引用

    // main.js
      import './plugins/axios'
    复制代码

实际应用

例如这样一个场景:后端的所有接口都需要登录后,根据成功登录返回的token进行访问。后端接口使用shiro+jwt实现接口鉴权和token发放

  • 在App.vue中调用登录接口获取token
created: function(){
      let userInfo = {
        username: "李凯",
        password:"likaia098890"
      };
      this.axios.post("/login",userInfo).then((response)=>{
        const data = response.data;
        // 设置token
        this.axios.defaults.headers.common['Authorization'] = data.token;
        console.log("请求头token设置成功:"+data.token);
      }).catch((error)=>{
        console.log(error);
      });
}
复制代码
  • 执行结果
  • 调用其他接口,测试请求头token是否添加成功
sendMessage: function (event) {
    this.axios.post("/getter/postJSON",{name:"likai",age:"19"}).then((res)=>{
        console.log("接口请求成功");
        console.log(res);
    }).catch((err)=>{
        console.log("接口请求失败");
        console.log(err)
    });
}
复制代码
  • 执行结果

至此,本篇文章就分享结束了,当然axios还有请求拦截器和响应拦截器,用于对请求出发和请求到来的一些处理,可在 plugins/axios.jsaxios.interceptors.request.useaxios.interceptors.response.use 回调函数进行处理。

写在最后

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注:blush:
  • 本文首发于掘金,如需转载请评论区留言:love_letter:
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章