在一个vue项目当中我们经常会使用到后端提供接口的调用,
例如：
this.$axios.get("/api/code").then((response) => {})
this.$axios.post("/api/login",data).then((response) => {})
···
当页面愈来愈多的时候，我们会重复的去请求 this.$axios.get()... this.$axios.post()... 就显得代码很冗余；
那么下面我们来封装一个 request.js 使api调用更具模块性。

思路

• 第一、创建 /src/utils/request.js

request.js
第一步// 引入axios
第二步// 创建axios实例
第三步// 设置请求拦截器
第四步// 设置响应拦截器

• 第二、创建 /src/api/xxx.js

xxx.js
第一步// 引入封装的request.js文件
第二步// 暴露出我们的接口请求,export导出

• 第三、全局使用或按需引入

在 src 目录下添加 utils 文件夹并创建 request.js

import axios from 'axios'
// axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
// axios.defaults.headers['Platform'] = 'web'
// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL:  'http://www.baidu.com',
    // 超时
    timeout: 10 * 1000,
})

// 请求拦截器
service.interceptors.request.use(
    config => {
        // 让每个请求携带自定义token 请根据实际情况自行修改
        // config.headers['Authorization'] = token
        return config;
    },
    error => {
        console.log('err：' + error);
        return Promise.reject(error);
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
        return response;
        // 未设置状态码则默认成功状态
        // const code = response.data.code || 200;
        // // 获取错误信息
        // const errorCode = {
        //     '401': '认证失败，无法访问系统资源',
        //     '403': '当前操作没有权限',
        //     '404': '访问资源不存在',
        //     'default': '系统未知错误,请反馈给管理员'
        // };
        // const msg = errorCode[code] || response.data.msg || errorCode['default'];
        // if (code === 500) {
        //     return Promise.reject(new Error(msg))
        // } else if (code !== 200) {
        //     return Promise.reject('error')
        // }else{
        //     return response.data
        // }
    },
    error => {
        console.log('err：' + error);
        let { message } = error;
        if (message == "Network Error") {
            message = "后端接口连接异常";
        }
        else if (message.includes("timeout")) {
            message = "系统接口请求超时";
        }
        else if (message.includes("Request failed with status code")) {
            message = "系统接口" + message.substr(message.length - 3) + "异常";
        }
        return Promise.reject(message);
    }
)
export default service;

在 src 目录下添加 api 文件夹并创建 xxx.js

import request from '@/utils/request' // 引入封装的request.js文件
// 暴露出我们的接口请求,export导出
// 登录接口
export function Login(data) {
    return request({
        url: '/api/login',
        method: 'post',
        data: data,
    })
}
// 图形验证码
export function refreshCode(query) {
    return request({
        url: '/api/code',
        method: 'get',
        params: query
    })
}

使用方式

import { Login , refreshCode } from "@/api/api";
export default {
    data() {
        return {
            form: {
                username: 'test123',
                password: '123456',
                code: '',
            }
        }
    },
    created(){
        this.toLogin();
    }
    methods: {
        toLogin(){
            let data = {
                username: this.form.username,
                password: this.form.password
            };
            Login( data ).then(( response ) => {
                console.log( response );
            });
            refreshCode( {code: this.form.code} ).then(( response ) => {
                console.log( response );
            })
        }
    },
}

今后的使用过程中，可在每个页面定义一个属于它的 /src/api/xxx.js 文件，使用时引入封装好的文件调用即可。