vue項(xiàng)目用axios做request封裝

今天來(lái)簡(jiǎn)單的做一下axios封裝

  • 首先安裝axios
npm install axios -- save
  • 然后在src文件夾下創(chuàng)建一個(gè)名為utils文件夾, 在utils文件夾下創(chuàng)建一個(gè)request.js的js文件
    image.png

然后進(jìn)行import引入

import axios from 'axios'
import {Message} from 'element-ui' // 項(xiàng)目用的element ui
import router from '../router'
  • 接著創(chuàng)建實(shí)例
const service = axios.create({
    timeout: 7000, // 超過(guò)7秒提示超時(shí)
    baseUrl: 'https://www.baidu.com'
})
  • 然后設(shè)置請(qǐng)求攔截器
// 請(qǐng)求攔截器
service.interceptors.request.use(
    config => {
        if(localStorage.token) {
            config.headers.token = localStorage.token;
        }
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
)
  • 然后設(shè)置響應(yīng)攔截器
    注: 響應(yīng)去判斷后臺(tái)返回的狀態(tài)碼, 是要你們自己去跟后臺(tái)去協(xié)商, 是什么字段, 協(xié)商好才能寫(xiě)
// 響應(yīng)攔截器
service.interceptors.response.use(
    response => {
        // 接收后臺(tái)參數(shù)狀態(tài)
        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 || '未知錯(cuò)誤';
            Message({
                message,
                type: 'error',
                duration: 5 * 1000
            });
            console.log('攔截器打印錯(cuò)誤:', res);
            // 這里可以設(shè)置后臺(tái)返回狀態(tài)碼是500或者是其他,然后重定向跳轉(zhuǎn)
            // if(res.ErrorCode == 500) {
            //     router.push('/login')
            // }
            return Promise.reject(
                new Error(res.message || (res.error &&res.error.message) || '未知錯(cuò)誤')
            );
        }
    },
    error => {
        console.log('服務(wù)器錯(cuò)誤信息:', error);
        if(error.response) {
            // error.response有錯(cuò)誤信息,是接口錯(cuò)誤,不是取消請(qǐng)求
            // 獲取錯(cuò)誤碼,彈出提示信息,reject()
            let code = error.response.status;
            if(res.code == 401) {
                // router.push('/login');
                return Promise.reject(
                    new Error('登錄過(guò)期,請(qǐng)重新登錄')
                );
            }
            Message({
                message: '服務(wù)器繁忙, 請(qǐng)稍后再試!  ' + code,
                type: 'error',
                duration: 3 * 1000
            });
            return Promise.reject(error.message);
        }else {
            // 是取消請(qǐng)求
            // 直接reject
            return Promise.reject(error.message);
        }
    }
)
export default service;
  • 完整的request.js文件
import axios from 'axios'
import {Message} from 'element-ui' // 項(xiàng)目用的element ui
import router from '../router'

const service = axios.create({
    timeout: 7000, // 超過(guò)7秒提示超時(shí)
    baseUrl: 'https://www.baidu.com'
})

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

// 響應(yīng)攔截器
service.interceptors.response.use(
    response => {
        // 接收后臺(tái)參數(shù)狀態(tài)
        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 || '未知錯(cuò)誤';
            Message({
                message,
                type: 'error',
                duration: 5 * 1000
            });
            console.log('攔截器打印錯(cuò)誤:', res);
            // 這里可以設(shè)置后臺(tái)返回狀態(tài)碼是500或者是其他,然后重定向跳轉(zhuǎn)
            // if(res.ErrorCode == 500) {
            //     router.push('/login')
            // }
            return Promise.reject(
                new Error(res.message || (res.error &&res.error.message) || '未知錯(cuò)誤')
            );
        }
    },
    error => {
        console.log('服務(wù)器錯(cuò)誤信息:', error);
        if(error.response) {
            // error.response有錯(cuò)誤信息,是接口錯(cuò)誤,不是取消請(qǐng)求
            // 獲取錯(cuò)誤碼,彈出提示信息,reject()
            let code = error.response.status;
            if(res.code == 401) {
                // router.push('/login');
                return Promise.reject(
                    new Error('登錄過(guò)期,請(qǐng)重新登錄')
                );
            }
            Message({
                message: '服務(wù)器繁忙, 請(qǐng)稍后再試!  ' + code,
                type: 'error',
                duration: 3 * 1000
            });
            return Promise.reject(error.message);
        }else {
            // 是取消請(qǐng)求
            // 直接reject
            return Promise.reject(error.message);
        }
    }
)
export default service;
  • 最后在src文件夾下創(chuàng)建api文件夾,在api文件夾下創(chuàng)建一個(gè)api.js的js文件
    image.png

然后import引入我們的request方法

import request from '@/utils/request'

在里面定義baseUrl

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

最后去寫(xiě)一個(gè)接口請(qǐng)求方法

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'; // 設(shè)置環(huán)境接口的域名

// 暴露出我們的接口請(qǐng)求,export導(dǎo)出
export function login(data) {
    return request({
        url: baseUrl + `/admin/user/login`,
        method: 'post',
        data
    })
}
  • 然后我們?nèi)フ?qǐng)求接口
    先創(chuàng)建一個(gè)login.vue文件
<template>
    <div class="login">
        <div class="login-box">
            <div class="login-header">歡迎登錄個(gè)人知識(shí)庫(kù)</div>
            <div class="account-number">
                <span class="from-label">賬號(hào)</span>
                <el-input v-model="user.account" placeholder="請(qǐng)輸入用戶(hù)賬號(hào)"></el-input>
            </div>
            <div class="account-psd">
                <span class="from-label">密碼</span>
                <el-input v-model="user.PassWord" placeholder="請(qǐng)輸入用戶(hù)密碼"></el-input>
            </div>
            <div class="account-footer">
                <el-button type="primary" @click="handleSubmit">登 錄</el-button>
                <span class="forget-pwd" @click="handleForgetPwd">忘記密碼?</span>
            </div>
        </div>
    </div>
</template>

<script>
import {login} from '@/api/api'; // 引入我們的api接口文件,花括號(hào)里面是我們暴露出來(lái)的login接口方法
export default {
    data() {
        return {
            user: {}
        }
    },
    created() {

    },
    methods: {
        // 登錄
        handleSubmit() {
            login({
                UserName: this.user.account,
                PassWord: this.user.PassWord
            }).then(res => {
                console.log(res)
                // this.$alert('恭喜你登錄成功了,但是我只寫(xiě)了這一個(gè)網(wǎng)頁(yè),要不你再登錄一下?', '', {
                //     confirmButtonText: '確定'
                // });
                this.$message.success('登錄成功');
                this.$router.push({
                    name: 'layout'
                })
            })
        },
        // 忘記密碼
        handleForgetPwd() {
            this.$alert('請(qǐng)先注冊(cè)', '', {
                confirmButtonText: '確定'
            });
        }
    }
}
</script>

這樣就完成啦,對(duì)你有幫助的話點(diǎn)個(gè)贊哦

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容