axios封装

最新推荐文章于 2024-11-16 17:07:46 发布

番茄烩土豆

最新推荐文章于 2024-11-16 17:07:46 发布

阅读量95

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_44268152/article/details/128705888

版权

本文展示了如何创建一个基于axios的request.js文件，设置基础URL和超时时间，并添加请求和响应拦截器。然后，创建xxxApi.js文件定义了两个接口test和hello，分别对应GET和POST请求。最后，演示在组件中如何调用这些接口并处理响应。

摘要由CSDN通过智能技术生成

1.创建request.js，录入一下代码

import axios from 'axios'

const instance = axios.create({
    baseURL: 'http://localhost:8888/',
    timeout: 30000,
});

// 请求拦截器
instance.request.use(function (config) {
    return config;
}, function (error) {
    return Promise.reject(error);
});

// 响应拦截器
instance.response.use(function (response) {
    return response;
}, function (error) {
    return Promise.reject(error);
});

export default instance;

2.创建xxxApi.js文件，根据一下模板录入接口调用

import request from '../request'

export const test = (params) => request.get('/test', { params });

export const hello = (data) => request.post('/hello', data);

3.调用接口

import { test, hello } from "./api/userApi.js";
export default {
    methods: {
        test() {
            test(this.params)
                .then((resp) => {
                    console.log(resp);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        hello() {
            hello(this.data)
                .then((resp) => {
                    console.log(resp);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};