封裝axios

1.什麼是axios

    Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

    特點：

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防禦 XSRF

在項目過程中，會頻繁的使用調取接口，爲了避免重複代碼，快速編寫接口，對axios進行封裝

進行封裝axios-1

//引入axios,qs
import axios from 'axios'
import qs from 'qs'

//設置axios的默認地址
axios.defaults.baseURL = 'http://127.0.0.1:8888'


//進行攔截
axios.interceptors.request.use(function (config) {
   const token =  localStorage.getItem('token')
    // 在發送請求之前做些什麼，例如加入token , 添加請求頭    
    //除了登錄界面，全部帶上請求頭
    config.headers.Authorization = `Bearer ${token}`   
    return config;
}, function (error) {
    // 對請求錯誤做些什麼
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
    // 在接收響應做些什麼，例如跳轉到登錄頁
    let { code, msg } = response.data;
    //當有code的時候進行消息提示
    if (code != undefined) {
        if (code === 1) {
            //彈出提示，刪除成功
            Message({
                message: msg,
                type: "success"
            });
        }
        if (code === 0) {
            Message.error(msg)
        }
    }
    return response;
}, function (error) {
    // 對響應錯誤做點什麼
    return Promise.reject(error);
});


//進行封裝axios並暴露
export default {
    get(url, params) {
        return new Promise((resolve, reject) => {
            axios.get(url, { params })
                .then(res => resolve(res.data))
                .catch(err => reject(err))
        })
    },
    post(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, qs.stringify(params))
                .then(res => resolve(res.data))
                .catch(err => reject(err))
        })
    },
}

進行封裝axios-2

import axios from 'axios'
import qs from 'qs'

//默認地址
axios.defaults.baseURL = 'http://127.0.0.1:3333'

//請求攔截器
axios.interceptors.request.use((req)=>{
    const token = '13';
    if(token){
        //token爲後端定義字段
        axios.defaults.token = token
    }

    // 處理post
    if(req.method == 'post'){
        //後端如果是加上了cotent-type字段，則不需要處理
        req.data = qs.stringify(req.data)
    }
    
   //返給後臺
    return req
},(err)=>Promise.reject(error));


//響應攔截器
axios.interceptors.response.use((res)=>{
    //對返回狀態進行處理
    switch (res.status) {
        case 400:
            break;
        case 500:
            break;
        default:
            break;
    }     
    //返回前端
    return res.data.data
},(err)=>Promise.reject(error));

 

進行接口封裝

import request from '@/utils/request.js' //引入封裝的axios

//暴露接口

//登錄接口
export const loginAccount = params => request.get('/login',params);