vue+axios二次封装请求后端接口、模块、导入导出、parseInt、、stringify、Promise、createObjectURL、default、import、export、as

文章目录

  • 前言
  • 1、http文件内容
  • 2、app.js文件
  • 3、main.js文件
  • 4、使用
    • 4.1、get请求
    • 4.2、post请求


前言

二次封装axiosapi,新建名为request文件夹,在文件夹中新建两个名为httpapijs文件,文件夹名称和文件名自定义,不属于硬性要求,只是文件夹的位置一定要在src根目录下,并且src是其直接父级。在使用过程中不一定都要通过api文件来请求数据,api文件只是统一接口,不是请求的出口,而axios才是请求的最终出口。可以直接引用二次封装的axios,也可以直接使用原始的axios。这里的封装是为了解决统一性,也使得整个项目更简洁,杜绝到处出现后端接口地址的现象。


1、http文件内容

注释

本次封装的axios用在vue2中,所以特别需要注意axiosqselement-ui的版本。


安装axios

npm install axios@0.21.1 --save
cnpm install axios@0.21.1 --S
yarn add axios@0.21.1

安装qs

npm install qs@6.5.3 --save
cnpm install qs@6.5.3 --S
yarn add qs@6.5.3

安装element-ui

npm install element-ui@2.15.12 --save
cnpm install element-ui@2.15.12 --S
yarn add element-ui@2.15.12

代码

// ^0.21.1
import axios from 'axios';
// ^6.5.3
import qs from 'qs';
// ^2.15.12
import { Message } from 'element-ui';

// 创建axios实例
const request = axios.create({
    // 后端服务器地址
    baseURL: 'url',
    // 请求超时时间
    timeout: 2000
});

// 响应错误码封装
function errorMsg(status, msg) {
    status = parseInt(status);

    let result = '';

    switch (status) {
        case 400:
            result = msg ? msg : '请求错误';
            break
        case 404:
            result = msg ? msg : `请求地址出错`;
            break
        case 500:
            result = msg ? msg : '服务器内部错误';
            break
        case 503:
            result = msg ? msg : '服务不可用';
            break
        default:
            result = msg;
    }

    return result;
}

// request拦截器
request.interceptors.request.use(config => {
    // 配置所需请求投
    config.headers['Authorization'] = "token";
    config.headers['Access-Control-Allow-Origin'] = '*';

    if (config.method === 'post') {
        // post 请求
        config.headers["content-type"] = "application/x-www-form-urlencoded";
        // 序列化,比如表单数据
        config.params = qs.stringify({ ...config.params });
    } else {
        // 默认类型(get)
        config.headers["content-type"] = "application/json";
        config.params = { ...config.params };
    }

    return config;
},
    error => {
        return Promise.reject(error);
    }
);

// response拦截器(响应需求可以和后端沟通配合修改)
request.interceptors.response.use(
    response => {
        // 此处可以设置公共提示
        // 但目前项目的数据返回结构与方式不统一
        // 所以无法做全局提示
        return response;
    },
    error => {
        // 响应失败,提示失败内容
        if (error && error.response) Message({
            message: errorMsg(error.response.status, error.response.message),
            type: 'error',
            duration: 3 * 1000
        });

        return Promise.reject(error);
    }
);

export default request;

2、app.js文件

import { default as request } from './http.js';

// 登录
const postLogin = (data) => request.post('/api/login', data);

// 获取验证码
const getVerificationCode = (params) => request.get('/api/code', params);

// 导出方式二
export {
    postLogin,
    getVerificationCode
};

// 导出方式一
export default {
    postLogin,
    getVerificationCode
};

3、main.js文件

// 引入http
import { default as axios } from '@/request/http.js';
// 引入api
import api from '@/request/api.js';

// 挂载api到vue原型
Vue.prototype.$api = api;
// 挂载http到vue原型
Vue.prototype.$axios= request;

4、使用

4.1、get请求

请求的时候传递responseType: 'blob'属性及值是为了把图片流转为正常的图片格式。


全局挂载,通过axios文件使用

this.$axios
    .get("api/code", { params: {}, responseType: "blob" })
    .then(({ data }) => {
        this.VCode = window.URL.createObjectURL(data);
    })
    .catch(function (error) {
        console.log("获取验证码失败: ", error);
    });

☺☺☺

直接使用axios
需要在全局引入并挂载到vue原型上
import { default as request } from '@/request/http';
Vue.prototype.$axios = request;
需要在.vue中写路径
.vue文件里面不需要引入api文件
http文件的导出方式为 export default request;


单页面引入,通过api文件使用

import { getVerificationCode } from '@/request/api.js;

getVerificationCode({ params: {}, responseType: "blob" })
    .then(({ data }) => {
        this.VCode = window.URL.createObjectURL(data);
    })
    .catch((error) => {
        console.log("获取验证码失败: ", error);
    });

☺☺☺

需要在api文件中定义好路径
需要在.vue文件中引入api文件
import { getVerificationCode } from '@/request/api.js;'
api文件的导出方式为 export { getVerificationCode };


全局挂载,通过api文件使用

this.$api
    .getVerificationCode({ params: {}, responseType: "blob" })
    .then(({ data }) => {
        this.VCode = window.URL.createObjectURL(data);
    })
    .catch((error) => {
        console.log("获取验证码失败: ", error);
    });

☺☺☺

需要在api文件中定义好路径
不需要引入api文件
api文件的导出方式为 export default { getVerificationCode };
需要在全局引入挂载
import api from '@/request/api';
Vue.prototype.$api = api;

4.2、post请求

this.$api
    .postSurveillance({})
    .then(({ data }) => {
        console.log(data);
    })
    .catch((error) => {
        console.log("登陆失败: ", error);
    });

☺☺☺

post请求与get请求类似,传参的方式有所差异而已。

你可能感兴趣的:(Vue,web,JavaScript,vue.js,javascript,前端)