【经验与坑】VueJs使用Axios封装和API管理

码农智涵的程序人生 2021-07-20

327

在Vue项目中，和后台交互获取数据这方面，大多数是使用axios库的，它是一个基于 ES6 promise 的 http 库，可以运行在浏览器端和 node.js中。它之所以深受开发人员的追捧，是因为它具有很多优秀的特性，例如拦截请求和响应，取消请求，转换 JSON ，客户端防御 XSRF等。

promise是什么呢？在往期更新中也有记录学习。

众所周知，JavaScript是一个解释性的，直译性的一股脑向下执行的语言，JavaScript是在程序运行过程中边逐行解释。所以JS语言的执行环境是 “单线程” 的，也就是说一次只能完成一件事。如果有多个任务，那就必须排队，执行环境相对单纯，这是它的好处。当然任何事情具有两面性，有利也有弊，坏处就是如果任务队列中有一个任务耗时过长，后面的任务就必须排队等着，会拖死整个程序。【常见的浏览器无响应（假死），其实就是因为某一段JS代码长时间执行（比如极端假设死循环），导致整个页面卡在一个地方，其他任务也无法完成】。
及萨博涵五六，公众号：码农智涵的程序人生【基础知识】ES6——Promise

新建项目-准备工作

（1）通过 vue-dashbord 新建Vue2.0项目 axiostest

（2）选择之前对 vue2.0设置好的选项继续（仅个人开发风格偏好）。

因为是记录比较学习的过程，所以没有选择安装 axios-plugin，事实上这样在实际的开发过程中更加方便，vue会自动生成一个 axios的模板，直接在里面写自己的业务代码即可。

（3）在终端安装 axios 库

npm install axios

（4）在终端安装qs库（JSON格式化库）

详细见https://www.npmjs.com/package/qs

安装命令 npm i qs

（5）在 dashbord 安装 vant UI库

（6）将相关依赖引入项目

在新建项目中的 src 目录下新建一个 request 文件夹，然后在里面新建http.js，base.js，新建api文件夹存放 user.js .

base用于管理接口域名，http负责处理请求拦截与响应拦截，user负责接口文件并且我将其放在了api文件夹下方便统一管理。

//引入 axios
import axios from  'axios';
import QS from 'qs';
//通知框框
import {Toast} from 'vant';

http.js

import axios from "axios";
import {Toast} from 'vant';
import Qs from 'qs';


//设置请求超时最大值
axios.defaults.timeout = 10000;


//设置 post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';




//展示vant组件的 加载动画
function startLoading(){
    Toast({
        message:'加载中',
        duration:1000,
        forbidClick:true
    })
}


//vant 加载完成动画
function endLoading(){
    Toast({
        message:'加载完成',
        duration:1000,
        forbidClick:true
    })
}
//vant 加载失败动画
function failLoading(){
    Toast({
        message:'加载失败',
        duration:1000,
        forbidClick:true
    })
}


// 请求拦截
axios.interceptors.request.use(
    (config) =>{
        startLoading();
        const token = store.state.token;
        //设置请求头
        config.headers.Authorization = token;
        endLoading();
        return config;
    },
    (error => {
        Promise.reject(error);
    })
)


//响应拦截
axios.interceptors.response.use(
    (response)=>{
        endLoading();
        return response;
    },
    error => {
        if (error.response.status){
            switch (error.response.status){
                case 2001:
                    Toast({
                       message:'用户未登录',
                       duration:1000,
                       forbidClick:true
                    });
                    setTimeout(()=>{
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    },1000);
                    break;
                case 2003:
                    Toast({
                        message:'密码错误',
                        duration:1000,
                        forbidClick:true
                    });
                    setTimeout(()=>{
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    },1000);
                    break;
                case 2007:
                    Toast({
                        message:'账号不存在',
                        duration:1000,
                        forbidClick:true
                    });
                    setTimeout(()=>{
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    },1000);
                    break;
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }
)


export default axios;

base.js

用于管理请求接口的域名，方便后期的开发与维护，若以后有什么改变或者增加，只需在这里修改就可以了。

import axios from "../http";
import Qs from "qs";
import base from "@/request/base";


/**
 * post方法，对应post请求
 * @desc注册请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function userRejister(data) {
    return axios({
        url: `${base.url}/users/register`,
        method: 'post',
        data: Qs.stringify(data)
    })
}
/**
 * get方法，对应get请求
 * @desc登录请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function userInfo() {
    return axios({
        url: `${base.url}/profile/all`,
        method: 'get'
    })
}

view中引用

    //注册按钮触发注册请求方法
    registBtnListener(){
      Promise((resolve,reject)=>{
        userRejister(data)
        .then(response =>{
          console.log(response);
          resolve();
        })
        .catch(error =>{
          reject(error);
        })
      })
    },

数据库

文章转载自码农智涵的程序人生，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

【经验与坑】VueJs使用Axios封装和API管理

评论