vue中axios的封装使用(简易封装),统一API接口管理

1.在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。更多详情,请移步axios官网.

2.话不多说,先上完整代码链接.GitHub代码 (如因网络等原因打不开GitHub,请移步码云代码).

3.整体结构示意图:

4.主要步骤:

4.1: 安装axios依赖:  

npm install axios

4.2:src下新建api文件夹,用于存放axios的相关封装及其衍生api文件等.

4.3:创建request.js文件来创建axios实例及拦截等(附上主要代码,重点部分均有注释,elm组件库记得安装哦).

import axios from 'axios';
import { Message } from "element-ui";


let baseURL = 'http://112.5.154.242:61901/'    //接口请求的域名(生产和测试环境一般不同)


/**
 * 请求类型为post时请求头的请求类型默认为{headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
 * 可按实际修改为{headers: {'Content-Type': 'application/json; charset=UTF-8'}}或者{headers: {'Content-Type': 'multipart/form-data; charset=UTF-8'}}  跟在传参后
 * 列如:
 *  export function postHome(data){
        return server.post('Home/BlocManage/auth',data,{headers: {'Content-Type': 'multipart/form-data; charset=UTF-8'}})
    }
 */

const server = axios.create({     //创建axios实例
    baseURL: baseURL,
    timeout: 80000,
})


// 添加请求拦截器
server.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log(1,config);
    // config.headers.token = '7b569b6b1660fa23162567d0c35ad51a'   //一般是判断是否存在token后再决定头部是否添加token
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

server.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    console.log(2,response);

    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
    // 否则的话抛出错误
    if (response.status === 200) {            
        return Promise.resolve(response);        
    } else {            
        return Promise.reject(response);        
    }  

    // return response;
}, function (error) {
    // 对响应错误做点什么
    // 服务器状态码不是2开头的的情况
    // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    // 下面列举几个常见的操作，其他需求可自行扩展
    if (error.response.status) {            
        switch (error.response.status) {                
            // 401: 未登录
            // 未登录则跳转登录页面，并携带当前页面的路径
            // 在登录成功后返回当前页面，这一步需要在登录页操作。                
            case 401:                    
                // router.replace({                        
                //     path: '/login',                        
                //     query: { 
                //         redirect: router.currentRoute.fullPath 
                //     }
                // });
                break;

            // 403 token过期
            // 登录过期对用户进行提示
            // 清除本地token和清空vuex中token对象
            // 跳转登录页面                
            case 403:
                Message.error('登录过期，请重新登录');
                // 清除token
                localStorage.removeItem('token');
                // store.commit('loginSuccess', null);
                // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                setTimeout(() => {                        
                    // router.replace({                            
                    //     path: '/login',                            
                    //     query: { 
                    //         redirect: router.currentRoute.fullPath 
                    //     }                        
                    // });                    
                }, 1000);                    
                break; 

            // 404请求不存在
            case 404:
                Message.error('网络请求不存在');
                break;
            // 其他错误，直接抛出错误提示
            default:
                Message.error(error.response.data.message);
        }
        return Promise.reject(error.response);
    }
    // return Promise.reject(error);
});


export default server

4.4: 创建xx.js文件用于具名模块的api统一管理和之后对应页面的调用.

import server from '@/api/request';

/**
 * get请求 获取用户
 */
export function getHome(data){   //get请求传参
    return server.get('Home/BlocManage/getAuthUserList', {params:data})
}


/**
 *post请求  授权用户
 */
export function postHome(data){   //post请求传参
    return server.post('Home/BlocManage/auth', data)
}

4.5:在4.4对应组件内引用并使用即可.

<template>
  <div class="home">
    <el-button type="primary" @click="postHome">点击</el-button>
  </div>
</template>

<script>
import * as API from '@/api/pageRequest/home';   //引入API

export default {
  name: "Home",
  data(){
    return {
      producerSn: '',
      blocCode: 'FXFT_0591591000',
      userids: '775'
    }
  },
  methods: {
    getHome(){
      let data = new URLSearchParams()
      if(this.producerSn){
        data.append('producerSn',this.producerSn)
      }
      API.getHome(data).then(res => {
        if(res.data.code == 200){
          console.log(res);
        }else{
          console.log(res.msg);
        }
      }).catch(err => {
        console.log(err.msg);
      })
    },
    postHome(){
      let data = new URLSearchParams()
      data.append('blocCode',this.blocCode)
      data.append('userids',this.userids)
      if(this.producerSn){
        data.append('producerSn',this.producerSn)
      }
      API.postHome(data).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
    }
  },
  created(){
    this.getHome()
  }
};
</script>

 

5.说明:以上是axios在vue中最简单的封装和使用,也是方便api接口的统一管理.更多更全面的封装及逻辑请前往axios官网查看对应API.