axios的简单封装

最新推荐文章于 2024-06-07 16:07:04 发布
最新推荐文章于 2024-06-07 16:07:04 发布
阅读量244 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33759361/article/details/116297315
版权 
<!DOCTYPE html>
<html>
<head>
    <title>封装axios对象</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    // 创建一个axios对象
    class Base {
        baseurl = 'http://www.baidu.com/'
        get_fun =  (url,params) => {
            return axios({
                url,
                methods: 'GET',
                baseURL: this.baseurl,
                withCredentials: true, 

            }).then(res => {
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
        post_fun = (url,params) => {
            return axios({
                url,
                methods: 'POST',
                baseURL: this.baseurl,
                withCredentials: true,
            }).then(res => {
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
    }
    // 请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        console.log('查看用户是否登录，如果登录了，给用户携带Token')
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        // 对全局状态码进行判断。
        return response;
    }, function (error) {
        // 请求失败了
        console.log('======',error)
        // 对响应错误做点什么
        return Promise.reject(error);
    });

    let base = new Base()
    base.get_fun('?ie=utf-8&wd=a',{id: '12'})
</script>
</body>
</html>
攒钱买房的迪迦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios.min.js
04-01
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 二、axios的使用:安装axios:cnpm install axios 在main.js文件引入axios:import Axios from 'axios'将axios全局挂载到VUE原型上:Vue.prototype.$http=Axios get方法发送请求//方法一传递参数 this.$http.get('https://cnodejs.org/api/v1/topics',{ params: { //参数 page: this.page, limit: this.limit, }, }).then(res => { //请求成功后的处理函数 this.isLoading = false; this.items = res.data.data; console.log(this.items); }).catch(err => { //请求失败后的处理函数 console.log(err) }) //方法二传递参数 this.$http.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')注意请求成功后的处理使用了箭头函数，因此在该函数内的this指向的是vue实例，若使用普通函数则需要另外处理this。
jQuery Ajax 实例 全解析
编码改变世界
02-15 803
http://www.cnblogs.com/qleelulu/archive/2008/04/21/1163021.html jQuery Ajax 实例 全解析 jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说，直接进入正题，我们先来看一些简单的方法，这些方
HTML导入并使用Axios
最新发布
风雨未有归期的博客
06-07 995
Axios 是一个基于网络请求库，作用于node.js和浏览器中。它是的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.jshttp模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。axios中文网：https://www.axios-http.cn。
Ajax介绍和Axios基本使用
Carson's Blog
12-11 4448
Ajax介绍 Ajax本身就是Asynchronous JavaScript And XML的缩写，直译为：异步的JavaScript和XML。 在实际应用中Ajax指的是：不刷新浏览器窗口，不做页面跳转，局部更新页面内容的技术。 『同步』和『异步』是一对相对的概念，那么什么是同步，什么是异步呢？ 1. 同步和异步 1.1. 同步 多个操作按顺序执行，前面的操作没有完成，后面的操作就必须等待。所以同步操作通常是串行的。 1.2. 异步 多个操作相继开始并发执行，即使开始的先后顺序不同，但是由于它们各自是在
axios入门
nice_chao的博客
04-16 3284
一.axios是基于promise对ajax的一种封装 1.首先进入官网导入CDN： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 2.根据后台的controller层的CRUD接口调用： 我们以全查询为例： @CrossOrigin为跨域资源共享注解切记加上 //全查询 @CrossOrigin @GetMapping("/findAll") @Resp
Axios
爱笑的boy的博客
07-17 1745
Axios
vue axios 简单封装以及思考
10-17
这篇文章将介绍如何在 Vue 项目中对 Axios 进行简单封装，并探讨封装过程中的考虑因素。 首先，Axios 的特点包括： 1. 支持 Promise API，使异步操作更易于管理。 2. 可以拦截请求和响应，添加自定义逻辑。 3. 自动...
前端axios请求封装
09-29
以下是一个简单的API模块封装示例： ```javascript // api.js import axios from 'axios'; const instance = axios.create({ baseURL: 'http://api.example.com', // 设置基础URL timeout: 5000, // 设置超时...
ts封装简单封装axios
03-07
在"ts封装简单封装axios"这个项目中，开发者可能进行了以下几步操作来实现`axios`的`TypeScript`封装： 1. **创建类型定义**：首先，开发者可能为`axios`的配置对象和响应对象创建了自定义的`TypeScript`类型定义。...
axios的ts二次封装+调用
02-02
在实际业务组件中，我们可以简单地导入封装好的API服务，然后调用对应的接口方法。例如，如果我们有一个`getUserInfo`接口，只需一行代码即可发起请求： ```typescript import { getUserInfo } from './api...
axios用于浏览器和node.js中发送ajax请求
weixin_42448406的博客
06-17 790
一、axios的作用 axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求 二、axios实例 创建axios_pro文件夹 1、复制js资源 vue.min.js axios.min.js 2、创建 axios.html 3、引入js <script src="vue.min.js"></script> <script src="axios.min.js"></script> 4、启动课程中心微服务 5、编写js <
axios.min.js文件
06-14
axios.min.js文件
axios.min.js文件下载
08-02
一个基于 promise 的网络请求库,ajax的封装
axios.min.js（ 0.26.0）
02-21
axios.min.js版本：0.26.0
在html页面以导入的方式使用axios进行异步请求
qq_38126773的博客
09-19 9371
学习笔记之在html页面以导入的方式使用axios进行异步请求
Axios使用方式
tiantiantbtb的博客
11-22 760
button onclick="fn3()">使用axios发送get请求,带参数,使用axios配置项方式//get无参请求 axios格式: axios.get(url).then().catch().finally()//get无参请求 axios格式: axios.get(url).then().catch().finally()//get无参请求 axios格式: axios.get(url).then().catch().finally()
对axios简单封装，方便使用axios完成和后台数据交互
05-27
好的，对于axios的简单封装，一般可以封装成一个工具类，方便在整个项目中使用。以下是一个简单的示例： ```javascript import axios from 'axios' const instance = axios.create({ baseURL: 'http://localhost:3000/api' }) export function post(url, data) { return instance.post(url, data) } export function get(url, params) { return instance.get(url, { params }) } ``` 上面的代码中，我们使用了axios的create方法创建了一个实例，设置了公共的基础URL。然后封装了post和get两个方法，用于进行post和get请求。 在具体使用时，我们只需要引入该工具类，然后调用post或get方法即可： ```javascript import { post, get } from 'utils/request' // 发送post请求 post('/login', { username: 'admin', password: '123456' }).then(res => { console.log(res) }) // 发送get请求 get('/user', { id: 1 }).then(res => { console.log(res) }) ``` 当然，对于更复杂的情况，我们还可以添加拦截器、设置超时时间等。但以上的代码已经可以帮助我们完成基本的和后台数据交互了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值