vue项目用axios做request封装

今天来简单的做一下axios封装

• 首先安装axios

npm install axios -- save

• 然后在src文件夹下创建一个名为utils文件夹, 在utils文件夹下创建一个request.js的js文件
  
  image.png

然后进行import引入

import axios from 'axios'
import {Message} from 'element-ui' // 项目用的element ui
import router from '../router'

• 接着创建实例

const service = axios.create({
    timeout: 7000, // 超过7秒提示超时
    baseUrl: 'https://www.baidu.com'
})

• 然后设置请求拦截器

// 请求拦截器
service.interceptors.request.use(
    config => {
        if(localStorage.token) {
            config.headers.token = localStorage.token;
        }
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
)

• 然后设置响应拦截器
  注: 响应去判断后台返回的状态码, 是要你们自己去跟后台去协商, 是什么字段, 协商好才能写

// 响应拦截器
service.interceptors.response.use(
    response => {
        // 接收后台参数状态
        const res = response.data;
        if(res.code == 20000 || res.status == 200 || res.success || res.ErrorCode == 20000) {
            return res;
        }else {
            let message = (res.error && res.error.message) || res.message || res.msg || '未知错误';
            Message({
                message,
                type: 'error',
                duration: 5 * 1000
            });
            console.log('拦截器打印错误:', res);
            // 这里可以设置后台返回状态码是500或者是其他,然后重定向跳转
            // if(res.ErrorCode == 500) {
            //     router.push('/login')
            // }
            return Promise.reject(
                new Error(res.message || (res.error &&res.error.message) || '未知错误')
            );
        }
    },
    error => {
        console.log('服务器错误信息:', error);
        if(error.response) {
            // error.response有错误信息,是接口错误,不是取消请求
            // 获取错误码,弹出提示信息,reject()
            let code = error.response.status;
            if(res.code == 401) {
                // router.push('/login');
                return Promise.reject(
                    new Error('登录过期,请重新登录')
                );
            }
            Message({
                message: '服务器繁忙, 请稍后再试!  ' + code,
                type: 'error',
                duration: 3 * 1000
            });
            return Promise.reject(error.message);
        }else {
            // 是取消请求
            // 直接reject
            return Promise.reject(error.message);
        }
    }
)
export default service;

• 完整的request.js文件

import axios from 'axios'
import {Message} from 'element-ui' // 项目用的element ui
import router from '../router'

const service = axios.create({
    timeout: 7000, // 超过7秒提示超时
    baseUrl: 'https://www.baidu.com'
})

// 请求拦截器
service.interceptors.request.use(
    config => {
        if(localStorage.token) {
            config.headers.token = localStorage.token;
        }
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
        // 接收后台参数状态
        const res = response.data;
        if(res.code == 20000 || res.status == 200 || res.success || res.ErrorCode == 20000) {
            return res;
        }else {
            let message = (res.error && res.error.message) || res.message || res.msg || '未知错误';
            Message({
                message,
                type: 'error',
                duration: 5 * 1000
            });
            console.log('拦截器打印错误:', res);
            // 这里可以设置后台返回状态码是500或者是其他,然后重定向跳转
            // if(res.ErrorCode == 500) {
            //     router.push('/login')
            // }
            return Promise.reject(
                new Error(res.message || (res.error &&res.error.message) || '未知错误')
            );
        }
    },
    error => {
        console.log('服务器错误信息:', error);
        if(error.response) {
            // error.response有错误信息,是接口错误,不是取消请求
            // 获取错误码,弹出提示信息,reject()
            let code = error.response.status;
            if(res.code == 401) {
                // router.push('/login');
                return Promise.reject(
                    new Error('登录过期,请重新登录')
                );
            }
            Message({
                message: '服务器繁忙, 请稍后再试!  ' + code,
                type: 'error',
                duration: 3 * 1000
            });
            return Promise.reject(error.message);
        }else {
            // 是取消请求
            // 直接reject
            return Promise.reject(error.message);
        }
    }
)
export default service;

• 最后在src文件夹下创建api文件夹,在api文件夹下创建一个api.js的js文件
  
  image.png

然后import引入我们的request方法

import request from '@/utils/request'

在里面定义baseUrl

const baseUrl = 'https://www.baidu.com';

最后去写一个接口请求方法

export function login(data) {
    return request({
        url: baseUrl + `/admin/user/login`,
        method: 'post',
        data
    })
}

• 完整的api.js文件

import request from '@/utils/request' // 引入封装的request.js文件

const baseUrl = 'https://www.baidu.com'; // 设置环境接口的域名

// 暴露出我们的接口请求,export导出
export function login(data) {
    return request({
        url: baseUrl + `/admin/user/login`,
        method: 'post',
        data
    })
}

• 然后我们去请求接口
  先创建一个login.vue文件

这样就完成啦,对你有帮助的话点个赞哦