如何封装axios?axios 的简单封装

1.首先引入 axios

import axios from 'axios'

2.创建一个实例

const api = axios.create({
    baseURL: '', // 请求的公共地址部分
    timeout:  3000 // 请求超时时间 当请求时间超过5秒还未取得结果时 提示用户请求超时
})

3axios的拦截器
请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置

// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
     // config 请求的信息
    return config // 将配置完成的config对象返回出去 如果不返回 请求则不会进行
}, err => {
    // 请求发生错误时的处理 抛出错误
   Promise.reject(err)
})

4.response

api.interceptors.response.use(res => {
    // 我们一般在这里处理,请求成功后的错误状态码 例如状态码是500,404,403
    // res 是所有相应的信息
    console.log(res)
   return Promise.resolve(res)
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})

5暴露api

export default api

6.封装接口

import api from '../index.js';

//下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = (params) => api.get(`/apigb/v1/component`, { params})

export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params)


// 下面是详细的写法
export const xxxx = (params) => api({
        url: '', // 请求地址
        method: 'post', // 请求方式
        // data: params, // (一般post请求,我们习惯使用 data属性来传参)
        params: params //(一般get请求,我们习惯使用params属性来传参)
        // 注意:data,和 params 两个属性传参使用,并不是固定的,也可以调换使用。
})

7在需要的页面import引入方法即可

import {getBanner} from '../../request/home/home'
getBanner().then(res=>{}
  • 19
    点赞
  • 187
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
要在 WebStorm 中封装 Axios,你可以按照以下步骤进行操作: 1. 首先,确保你已经在项目中安装了 Axios。你可以使用以下命令来安装 Axios: ``` npm install axios ``` 2. 创建一个名为 `api.js` 的新文件,用于封装 Axios。你可以将此文件放置在项目的根目录或任何方便的位置。 3. 在 `api.js` 文件中,导入 Axios 模块: ```javascript import axios from 'axios'; ``` 4. 创建一个新的 Axios 实例,并设置基本的配置。你可以设置 baseURL、headers 等等: ```javascript const api = axios.create({ baseURL: 'http://api.example.com', timeout: 5000, headers: { 'Content-Type': 'application/json', }, }); ``` 5. 定义需要的 API 请求方法。你可以为每个 API 请求定义一个函数,以便在其他文件中轻松调用。例如,创建一个名为 `getUser` 的函数: ```javascript export function getUser(userId) { return api.get(`/users/${userId}`); } ``` 6. 保存 `api.js` 文件。 现在,你已经成功封装Axios,并定义了一个用于调用 API 的函数。你可以在其他文件中导入 `api.js` 并使用这些请求方法了。例如,在你的 Vue 或 React 组件中,你可以这样使用 `getUser` 方法: ```javascript import { getUser } from './api.js'; getUser(1).then((response) => { console.log(response.data); }).catch((error) => { console.error(error); }); ``` 这样,你就可以在 WebStorm 中封装 Axios 并调用封装的 API 方法了。希望对你有所帮助!如果你有任何疑问,请随时向我提问。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值