如何对axios二次封装

1.首先在终端中下载axios

使用 npm:

 npm install axios

使用 bower:

 bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.在main.js中配置axios

import http from 'axios'

需要注意 axios不是一个插件 需要绑定在vue的prototype中 给它取名为$http

Vue.prototype.$http = http

3.在文件中使用axios,一般写在生命周期钩子中 

  mounted() {
        this.$http.get('/user?ID=12345')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    },

4.二次封装axio

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue对axios进行二次封装可以提高开发效率和代码的可维护性。以下是一个简单的示例: 1. 创建一个api.js文件,用于封装所有与后端交互的API请求: ```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://your-api-base-url.com', // 设置基础URL timeout: 5000, // 设置请求超时时间 }); // 添加请求拦截器 api.interceptors.request.use( (config) => { // 在发送请求之前做一些处理,例如添加token等 // config.headers['Authorization'] = 'Bearer ' + token; return config; }, (error) => { return Promise.reject(error); } ); // 添加响应拦截器 api.interceptors.response.use( (response) => { // 对响应数据进行处理,例如统一处理错误码等 return response.data; }, (error) => { return Promise.reject(error); } ); export default api; ``` 2. 在需要发送API请求的组件中引入api.js文件,并使用封装好的方法发送请求: ```javascript import api from './api.js'; export default { data() { return { todos: [], }; }, mounted() { this.fetchTodos(); }, methods: { fetchTodos() { api.get('/todos') .then((response) => { this.todos = response; }) .catch((error) => { console.error(error); }); }, createTodo() { api.post('/todos', { title: 'New Todo' }) .then((response) => { // 处理创建成功后的逻辑 }) .catch((error) => { console.error(error); }); }, }, }; ``` 通过封装后的api对象,我们可以在组件中直接调用get、post等方法发送请求,并且可以在拦截器中统一处理请求和响应的逻辑,提高代码的可维护性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值