request.js文件中代码解释

request.js代码:

import axios from 'axios'

const service = axios.create({
    baseURL: 'https://api.imooc-web.lgdsunday.club/api',
    timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
    (config) => {
        config.headers.icode = 'input you icode'
        return config // 必须返回配置
    },
    (error) => {
        return Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use((response) => {
    const { success, message, data } = response.data
    //   要根据success的成功与否决定下面的操作
    if (success) {
        return data
    } else {
        return Promise.reject(new Error(message))
    }
})

export default service

这段代码使用了 axios 库来创建一个自定义的 HTTP 客户端,并配置了请求拦截器和响应拦截器。这是在 Vue 或其他 JavaScript 框架中处理 API 请求的常见方式。下面是代码的详细解释:

  1. 引入 axios 库
import axios from 'axios'

这行代码引入了 axios,一个流行的 JavaScript 库,用于执行 HTTP 请求。

  1. 创建 axios 实例
const service = axios.create({
    baseURL: 'https://api.imooc-web.lgdsunday.club/api',
    timeout: 5000
})

这里使用axios.create() 方法创建一个新的 axios 实例,它允许你自定义请求的默认行为。baseURL 设置了所有请求的基础 URL,这意味着你只需提供相对路径即可发送请求。timeout 设置了请求超时时间为 5000 毫秒(5 秒),如果请求超过这个时间还没有响应,就会自动被取消。

  1. 请求拦截器
service.interceptors.request.use(
    (config) => {
        config.headers.icode = 'input you icode'
        return config // 必须返回配置
    },
    (error) => {
        return Promise.reject(error)
    }
)

请求拦截器通过 service.interceptors.request.use方法添加。拦截器接受两个函数作为参数:一个是请求成功前执行的函数,一个是请求失败时执行的函数。

1.成功的请求:在发送请求前,会先执行这个函数,它接收请求的配置对象 config 作为参数。这里设置了 config.headers.icode,添加了一个自定义的 HTTP 头。然后必须返回配置对象,否则请求将不会发出。
2.请求发生错误时:这个函数会接收错误对象,并通过 Promise.reject 将错误向外传递。

  1. 响应拦截器
service.interceptors.response.use((response) => {
    const { success, message, data } = response.data
    //   要根据success的成功与否决定下面的操作
    if (success) {
        return data
    } else {
        return Promise.reject(new Error(message))
    }
})

响应拦截器通过 service.interceptors.response.use方法添加。这个拦截器只定义了响应成功时执行的函数。

3.响应成功:该函数接收响应对象 response。从 response.data 中解构出 success、message 和 data。如果 success 为真,则返回 data 给后续处理;如果为假,则创建一个新的错误并通过 Promise.reject 将其向外传递,这样可以在调用 API 时直接处理这些错误。

  1. 导出 axios 实例
export default service

最后,导出这个配置好的 axios 实例,这样你就可以在其他文件中引入它,来发送经过预配置的请求。
这种方式使得 HTTP 请求的发送和错误处理更加统一和方便,在大型项目中尤其有用。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值