在vue项目封装第三方模快axios 进行网络请求并且 配置请求拦截器和响应拦截器

export function request(config) {

    // 1)创建axios的实例
    const baseURL='/api' //接口的基本路径
    const instance=axios.create({
        baseURL:baseURL,
        timeOut:5000,
    })

    //2.1)axios 的请求拦截器interceptor.request
    instance.interceptors.request.use(config=>{

        //在请求拦截器可以做以下操作

        // 1)config中的信息不符合服务器要求

        // 2)每次发送请求时,在界面显示一个图标 show出来(在成功响应的拦截器中隐藏)

        // 3)某些网络请求(比如登录(token)),必须携带一些特殊信息{判断路径,看是否有token}

        return config;//最后必须做的一步
    },err=>{

    })

    //2.2axios 的 响应拦截interceptors.response
    instance.interceptors.response.use(res=>{
        return res
    },err=>{})

    //3)发送网络请求
   return instance(config)//方法返回一个promise,通过.then拿到结果
  
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 项目中,可以通过以下步骤封装 axios请求拦截和响应拦截: 1. 安装 axios ``` npm install axios --save ``` 2. 创建一个 axios 实例 在项目中,一般会有多个接口请求,为了方便管理和配置,可以创建一个 axios 实例来处理所有的请求。在 `src` 目录下新建一个 `api` 文件夹,然后在该文件夹下新建一个 `http.js` 文件,输入以下代码: ```JavaScript import axios from 'axios' const http = axios.create({ baseURL: process.env.VUE_APP_BASE_URL, timeout: 5000, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) export default http ``` 上述代码中,我们创建了一个名为 `http` 的 axios 实例,并设置了一些默认配置,如请求的基础 URL、请求超时时间、请求头等。 3. 设置请求拦截器 请求拦截器可以在请求发送前做一些处理,如添加请求头、添加 loading 等。在 `http.js` 文件中添加以下代码: ```JavaScript http.interceptors.request.use(config => { // 添加 loading // ... // 添加请求头 // ... return config }, error => { return Promise.reject(error) }) ``` 4. 设置响应拦截器 响应拦截器可以在接收到响应后做一些处理,如判断响应状态码、关闭 loading 等。在 `http.js` 文件中添加以下代码: ```JavaScript http.interceptors.response.use(response => { // 判断响应状态码 if (response.status === 200) { return Promise.resolve(response.data) } else { return Promise.reject(new Error(response.statusText)) } // 关闭 loading // ... }, error => { return Promise.reject(error) }) ``` 5. 通过 `http` 实例发送请求 在需要发送请求的组件中,可以通过 `http` 实例发送请求。例如,获取用户列表的代码如下所示: ```JavaScript import http from '@/api/http' export default { data() { return { userList: [] } }, mounted() { http.get('/user/list').then(res => { this.userList = res.data }) } } ``` 上述代码中,我们通过 `http` 实例发送了一个 GET 请求请求的 URL 为 `/user/list`。请求成功后,将响应数据赋值给 `userList`。 通过以上步骤,我们就成功地封装axios请求拦截和响应拦截。在实际开发中,我们还可以根据项目需求进行更加复杂的封装
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值