Axios 封装

发布时间 2023-05-23 14:52:17作者: 东八区

一、安装 axios

`npm install axios`

二、在文件夹 utils 下创建 request.js 文件

import axios from 'axios' // 引入 axios

const service = axios.create({
    baseURL: "", // 如果需要代理地址的话,可以不设置baseURL
    timeout: 4000,
    headers: {
       // 设置 headers,例如:content-type
    }
})

// 请求拦截器
service.interceptors.request.use(
    request => {
        return request
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
        console.log(response)
        //设置响应头 设置允许跨域
        if (response.status != 200) {
            return Promise.reject(new Error(response.statusText || 'Error'))
        }
        const res = response.data;
        if (res.code == 200) {
            return res
        }
    }
)

export default service

三、在文件夹 API 下创建 api.js,封装请求

import service from "@/utils/request";

export const api = (data) => {
    return service.post('/api', data)
}

四、在组件文件中引入使用

import { api } from '@/api/api'

api(data).then( e => {}).catch( e => {})