Wie vue3 das Problem der Axios-Anfragekapselung löst

Vue3 tatsächliches Axios-Anforderungskapselungsproblem

1 Erstellen Sie einen http-Ordner im src-Verzeichnis und erstellen Sie index.js, request.js bzw. api.js im http-Ordner

2. Verwendet werden alle von api.js definierten Schnittstellen, der Code lautet wie folgt:

export * from './api';

4 Der api.js-Code lautet wie folgt:

import axios from 'axios';
import buildURL from 'axios/lib/helpers/buildURL';
import { merge } from 'axios/lib/utils';

//判断指定参数是否是一个纯粹的对象，所谓"纯粹的对象"，就是该对象是通过"{}"或"new Object"创建的
function isPlainObject (val) {
      return val && val.constructor.name === 'Object'
}

//请求之前进行拦截，可做的操作：1、添加loading的加载；2、添加请求头；3、判断表单提交还是json提交
let requestInterceptors = [
    config => {
        //添加loading的加载
        
        //添加请求头
        config.headers.authorization = sessionStorage.getItem('Token');
        //判断表单提交还是json提交
        if (config.emulateJSON && isPlainObject(config.data)) {
            config.data = buildURL('', config.data).substr(1);
        }
        return config;
    }
]

//请求响应之后进行拦截，可做操作：1、取消loading的加载；2、对返回状态进行判断：如请求错误、请求超时、获取数据失败、暂无数据等等
let responseInterceptors = [
    res => {
        //取消loading加载
        
        //对返回状态进行判断：如请求错误、请求超时、获取数据失败等等

        //返回结果
        return Promise.resolve(res);
    },
    err => {
        //取消loading加载
        
        //对返回状态进行判断：如请求错误、请求超时、获取数据失败等等

        //返回结果
        return Promise.reject(err);
    }
]

//组装请求
let serviceCreate = config => {
    let service = axios.create(merge({}, config));
    service.interceptors.request.use(...requestInterceptors);
    service.interceptors.response.use(...responseInterceptors);
    return service
}
serviceCreate();
export { serviceCreate, merge };

5 die Seite

import { serviceCreate, merge } from '@/http/request';

//这种方式可以采用单个项目的接口，也可以使用多个项目的接口，看自己的项目情况而定
let http0 = serviceCreate({
    baseURL: '/project1/api1',
    timeout: 15000,//请求超时
    emulateJSON: true,//默认表单提交
})
let http1 = serviceCreate({
    baseURL: '/project2/api2',
    timeout: 15000,//请求超时
    emulateJSON: true,//默认表单提交
})

//get请求示例
export function getData(params, config) {
    return http0.get('/project/list', merge(config, { params }));
}
//delete请求示例
export function deleteData(params, config) {
    return http0.delete('/project/list', merge(config,{ params }));
}
//post请求示例（表单提交）
export function postDataFrom(params, config) {
    return http0.post('/project/list', params, config);
}
//post请求示例（json提交）
export function postDataJson(params, config) {
    return http0.post('/project/list', params, merge(config, { emulateJSON: false }));
}
//put请求示例（表单提交）
export function putDataFrom(params, config) {
    return http0.put('/project/list', params, config);
}
//put请求示例（json提交）
export function putDataJson(params, config) {
    return http0.put('/project/list', params, merge(config, { emulateJSON: false }));
}

vue3 Axios Simple Packaging Tutorial

Erstellen Sie zunächst einen neuen Utils-Ordner im Stammverzeichnis und erstellen Sie unten zwei neue Dateien, request.js und html.js

requests.js wird verwendet, um Axios einzuführen und festzulegen Stammdomänenname und einige Standardeinstellungen, Interceptors usw.

import { getData, deleteData, postDataFrom, postDataJson, putDataFrom, putDataJson } from "@/http";

getData({ name: "我是参数" }).then(res => { console.log("返回数据", res) })
deleteData({ name: "我是参数" }).then(res => { console.log("返回数据", res) })
postDataFrom({ name: "我是参数" }).then(res => { console.log("返回数据", res) })
postDataJson({ name: "我是参数" }).then(res => { console.log("返回数据", res) })
putDataFrom({ name: "我是参数" }).then(res => { console.log("返回数据", res) })
putDataJson ({ name: "我是参数" }).then(res => { console.log("返回数据", res) })

Stellen Sie nach dem Schreiben das erstellte Instanzobjekt bereit und führen Sie es in html.js ein.

Die Funktion der Datei html.js besteht darin, das Instanzobjekt von Anforderungen aufzurufen und alle Zugriffe in dieser Datei (API) zu speichern, die Sie einführen können es nach Bedarf, wenn Sie es verwenden.

import axios from "axios";

const service = axios.create({
    baseURL: 'http://localhost:3000',
    timeout: 10000,
})

// 请求拦截器
service.interceptors.request.use(config=>{
    return config
},err=>{
    return Promise.reject(err)  //返回错误
})
    
// 响应拦截器
service.interceptors.response.use(res=>{
    return res
},err=>{
    return Promise.reject(err)  //返回错误
})


export default service

Eingeführte Dateien:

import request from "./requests";
export const GetPosts = () => request.get('posts/1')
export const GetsearchData = (params) => request.get('/list',{params})
export const PostPosts = (params) => request.post('posts',params)

Das obige ist der detaillierte Inhalt vonWie vue3 das Problem der Axios-Anfragekapselung löst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!