vue如何封装axios？

最新推荐文章于 2024-05-26 16:55:47 发布

原创最新推荐文章于 2024-05-26 16:55:47 发布 · 163 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html5

这篇博客介绍了如何利用npm安装axios并进行服务端配置，包括设置基础URL、超时时间，以及添加请求和响应拦截器来处理加载提示和错误。在service.js中，创建了一个axios实例并导出，方便在其他模块中调用。同时，创建了api.js用于定义具体的接口请求，如获取验证码和登录功能。最后展示了在实际应用中如何导入并使用这些封装好的请求。

1、首先在小黑框下载 npm i axios --save下载依赖,然后创建src/http/service.js

2、在service.js文件中存放的时axios的配置以及拦截器等，最后导出一个axios象。

import  axios  from  'axios'
import  {  Toast  }  from  'vant'
import  { baseUrl }  from  '@/config'

const  service  =  axios.create({  
    baseURL:  baseUrl,
      // url = base api url + request url
    //   withCredentials: true, // send cookies when cross-domain requests
      timeout:  5000  // request timeout
})
let  loading
    //请求拦截器
service.interceptors.request.use(config => {   
        loading  =  Toast.loading({     message:   '加载中...',     forbidClick:  true,    });  
        config.headers['Authorization']  =  sessionStorage.getItem('token')  
        return   config
    }, error  =>  {       // do something with request error
              
        console.log(error)  // for debug
                   return  Promise.reject(error)    
    })
    //响应拦截器
service.interceptors.response.use(res => {   //关闭loading
           
        loading.clear()   
        return  Promise.resolve(res)
    }, error => {   
        loading.clear()   
        console.log('err' +  error)   
        return  Promise.reject(error)
    })
    // module.export= service;
export  default  service

3、这里我再创建一个api.js,这里面放的是请求接口.传递的参数.请求方式,并且引入封装好的axios对象。

import  service  from  './service'
import  require  from  './require'

//定义请求方法，然后导出
//获取验证码
export  function  smsCode(arg) {    
    return  service({         url: require.smsCode,         data: arg,         method: 'post'     })
}
export  function  login() {    
    return  service({         url: require.login,         data: {},         method: 'post'     })
}

4、这里我再创建一个request.js,这里面放的是具体请求。