request 封装(vue axios)!!!

1.安装依赖包

npm i vue-axios --save

2.新建一个request.js文件

3.写了一个基础的拦截器

import axios from 'axios'

const baseURL = 'http://localhost:3000'
const request = axios.create({
  baseURL: baseURL,
  timeout: 12000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json, text/javascript'
  }
})

request.interceptors.request.use(
  data => {
    console.log(data)
    return data
  }, error => {
    return Promise.reject(error)
  })
request.interceptors.response.use(
  data => {
    return data
  }, error => {
    return Promise.reject(error)
  })

export default request

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用axios进行网络请求的封装可以提高代码的复用性和维护性,以下是一个简单的示例: 首先,安装axiosvue-axios库: ```bash npm install axios vue-axios ``` 接下来,在main.js中引入并注册这两个库: ```javascript import axios from 'axios'; import VueAxios from 'vue-axios'; Vue.use(VueAxios, axios); ``` 然后,创建一个api.js文件用于封装axios的请求方法: ```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://api.example.com', // 设置请求的基础URL timeout: 5000, // 设置请求超时时间 }); // 请求拦截器 api.interceptors.request.use( config => { // 可以在请求发送之前做一些处理,例如添加请求头等 return config; }, error => { // 请求错误处理 return Promise.reject(error); } ); // 响应拦截器 api.interceptors.response.use( response => { // 可以在接收到响应数据后做一些处理,例如统一处理错误码等 return response.data; }, error => { // 响应错误处理 return Promise.reject(error); } ); export default { // 封装GET请求 get(url, params) { return api.get(url, { params }); }, // 封装POST请求 post(url, data) { return api.post(url, data); }, // 封装PUT请求 put(url, data) { return api.put(url, data); }, // 封装DELETE请求 delete(url) { return api.delete(url); }, }; ``` 现在,你可以在Vue组件中使用封装好的api.js文件进行网络请求了: ```javascript import api from './api.js'; export default { mounted() { this.getData(); }, methods: { async getData() { try { const res = await api.get('/data'); console.log(res); } catch (error) { console.error(error); } }, }, }; ``` 以上就是一个简单的Vue axios封装示例,你可以根据实际需求对其进行扩展和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值