vue中關於axios的簡單封裝，api集中管理， typescript

axios 簡單封裝

在項目開發中進行項目開發時，對api接口進行集中管理非常重要

由於之前沒有怎么封裝過，只知道一些簡單使用，所以最近根據網上的一些教程試着寫了一下

1. 我在src目錄下新建了一個叫api 的文件夾，文件夾里新建了2個ts文件，api.ts和http.ts,
   其中api.ts 用來集中管理后端接口http.ts用來對axios進行封裝
   

2. 在http.ts中對axios代碼進行如下封裝(下面是http.ts的完整代碼)

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import qs from 'qs'

/**
 * @auther boyyang-love 
 * @NODE_ENV 根據當前環境確定請求地址
 * @development 開發環境、
 * @production 生產環境
 * @debug  測試環境
 */

const server: AxiosInstance = axios.create({
    baseURL: process.env.NODE_ENV == 'development' ? 'http://1905.com': 'http://2020.com' ,
    timeout: 3000,
})

/**
 * axios請求攔截
 * @return 
 * @config
 */
server.interceptors.request.use(
    (config: AxiosRequestConfig): AxiosRequestConfig | Promise<AxiosRequestConfig> => {
        if (config.method == 'get') {
            config.headers.get['Content-Type'] =  'application/x-www-form-urlencoded;charset=utf-8' 
        }
        if (config.method == 'post') {
            config.headers.post['Content-Type'] =  'application/json;charset=utf-8' 
        }
        // const token = '1111111';        
        // token && (config.headers.Authorization = token);
        console.log(config)
        return config;
    },
    (error) => {
        return Promise.reject(error)
    }
)
/**
 * 響應攔截
 * @return 
 * @response
 */

server.interceptors.response.use(
    (response: AxiosResponse<any>): AxiosResponse<any> | Promise<AxiosResponse<any>> => {
        return response
    },
    error => {
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    console.log('錯誤請求')
                    break;
                case 401:
                    console.log('未授權，請重新登錄')
                    break;
                case 403:
                    console.log('拒絕訪問')
                    break;
                case 404:
                    console.log('請求錯誤,未找到該資源')
                    break;
                case 405:
                    console.log('請求方法未允許')
                    break;
                case 408:
                    console.log('請求超時')
                    break;
                case 500:
                    console.log('服務器端出錯')
                    break;
                case 501:
                    console.log('網絡未實現')
                    break;
                case 502:
                    console.log('網絡錯誤')
                    break;
                case 503:
                    console.log('服務不可用')
                    break;
                case 504:
                    console.log('網絡超時')
                    break;
                case 505:
                    console.log('http版本不支持該請求')
                    break;
                default:
                    console.log(`連接錯誤${error.response.status}`)
            }
        } else {
            console.log('服務未連接')
        }
        return Promise.resolve(error.response)
    }
)

/**
 * 導出get請求方法
 * @url 請求地址
 * @params get請求參數
 */
export function get(url: string, params?: any): Promise<AxiosResponse> | Promise<AxiosResponse<any>> {
    return new Promise((resolve, reject) => {
        server.get(url, {
            params: params
        }).then((res) => {
            resolve(res.data)
        }).catch((err) => {
            reject(err)
        })
    })
}


/**
 * 導出post請求方法
 * @url 請求地址
 * @params post請求參數
 */

export function post(url: string, params: any): Promise<AxiosResponse> | Promise<AxiosResponse<any>> {
    return new Promise((resolve, reject) => {
        server.post(url, qs.stringify(params)).then((res) => {
            resolve(res.data)
        }).catch((err) => {
            reject(err)
        })
    })
}

3. 對后端接口進行集中管理（api.ts）

import  {get, post}  from "./https"

export const getHome = (params?: any) => get('/api/home', params)
export const postHome = (params: any) => post('/api/home', params)

4. 在頁面中調用api接口

// 引入
import { getHome } from "@/api/api.ts"

getHome({id: 1}).then((res :any) =>{
   console.log(res)
})

以上就是對axios的簡單封裝