axios的使用

已于 2023-02-14 22:27:15 修改
阅读量1.3k 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js javascript 前端
于 2021-12-18 17:49:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Da_ci_hua/article/details/122015109
版权

axios的使用

安装

npm install axios --save

导入
在main.js中导入

import axios from 'axios'

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

使用axios

//使用axios
    //axios自带promise,故可以用then
axios({
    url: 'http://123.207.32.32:8000/home/multidata',
    //默认情况下，也就是不写methods,就是get请求
    method: 'get'
}).then(
    res => {
        console.log(res);
    }
)

//虽然这个接口写在了下面，但是返回时，不知道谁先返回
axios({
    url: 'http://123.207.32.32:8000/home/data?type=sell&page=3'
}).then(
    res => {
        console.log(res);
    }
)

//上面的接口也可以这样写
axios({
    url: 'http://123.207.32.32:8000/home/data',
    //这写的是url的参数，专门针对get请求的参数拼接
    params: {
        type: 'pop',
        page: 3
    }
}).then(
    res => {
        console.log(res);
    }
)

在这里插入图片描述

axios发送并发请求

axios.all([axios(),axios()]).then()

//axios发送并发请求
axios.all([axios({
    url: 'http://123.207.32.32:8000/home/multidata',

}), axios({
    url: 'http://123.207.32.32:8000/home/data',
    params: {
        type: 'sell',
        page: 5
    }
})]).then(results => {
    console.log(results);
})

在这里插入图片描述

axios发送并发请求,分开展示

axios.all([axios({
    url: 'http://123.207.32.32:8000/home/multidata',

}), axios({
    url: 'http://123.207.32.32:8000/home/data',
    params: {
        type: 'sell',
        page: 5
    }
})]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

在这里插入图片描述

全局配置

有些属性是一样的，我们可以进行公共处理

//全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000',
    axios.defaults.timeout = 5000

//全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000',
    axios.defaults.timeout = 5000

axios.all([axios({
    url: '/home/multidata',

}), axios({
    url: '/home/data',
    params: {
        type: 'sell',
        page: 5
    }
})]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

常见的配置属性
params只针对get请求，对get请求进行拼接。
如果为post请求，相应的参数应该写在请求体里面的data中。
在这里插入图片描述

创建对应的axios的实例

对于全局创建组件，有些全局属性可能不一样，比如url，这时，全局属性就不是很好用了。

//对于不同参数的，进行创建不同实例
//创建对应的axios的实例
const instance1 = axios.create({
    baseURl: 'http://123.207.32.32:8000',
    timeout: 5000

})

//使用axios实例
instance1({
    url: '/home/multidata'
}).then(res => {
    console.log(res);
})

//另一个应用实例
instance1({
        url: '/home/data',
        params: {
            type: 'pop',
            page: 1
        }
    }).then(res => {
        console.log(res);
    })
    //第二个实例
const instance2 = axios.create({
    //这个url是和上面实例不同的，但是目前还没有别的接口。
    baseURl: 'http://123.207.32.32:8000',
    timeout: 10000,
    //headers:{}

})

axios模块的封装

我们必须有对第三方框架经行封装的习惯，免得第三方框架不跟新，更改费劲。
在这里插入图片描述好好补补回调的知识。

import axios from 'axios'
//第一种
//这里的参数success和failure是回调用的，这部分知识很薄弱，多补补。
export function request(config, success, failure) {
    //1.创建axios对象
    const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        })
        //发送真正的网络请求
        //别人给我们传入一个config，我们就要把config给instace传进去
    instance(config).then(res => {
        //这里已经回调了，所以没必要打印
        //console.log(res);
        success(res)
    }).catch(err => {
        // console.log(err);
        failure(err)
    })
}

封装好的文件的使用

//封装的网络请求的使用
//引入封装好的文件
import { request } from './network/request'

//第一种，要对应好
request({
    url: '/home/multidata'
}, res => {
    console.log(res);
}, err => {
    console.log(err);
})

第二种使用方法

//第二种
export function request(config) {
    //创建axios实例
    const instance3 = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        })
        //发送真正的网络请求
    insatace4(config.baseConfig).then(res => {
        config.success(res);
    }).catch(err => {
        config.failure(err)
    })
}

//第二种
request({
    baseConfig: {

    },
    success: function(res) {

    },
    failure: function(err) {

    }
})

axios的第三版原理写法
request.js

//最终的封装方法
 export function request(config) {
     return new Promise((resolve, reject) => {
         //1.创建axios的实例
         const instance = axios.create({
                 baseURL: 'http://123.207.32.32:8000',
                 timeout: 5000
             })
             //2.发送真正的网络请求
         instance(config).then(res => {
             resolve(res)
         }).catch(err => {
             reject(err)
         })
     })
 }

在需要网络请求的文件中

//最终的请求方式的使用
request({
    url: '/home/multidata'
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

此时，我们根据源码知道，上面的封装还是比较多余。
最终简洁版

import axios from 'axios'
//最终方式的简化，因为源码就是返回的promise，故可以不用promise
export function request(config) {
    //1.创建axios的实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })


    //2.发送真正的网络请求
    return instance(config)
}

如果哪天我们的框架不维护了，我们只需改我们的引入。但是在发送真正的网络请求那，就必须通过promise进行封装了。我们不用promise封装，是因为vue给我们封装好了。

axios拦截器

什么时候会用到拦截器
1.比如config中的一些信息不符合服务器要求。
2.比如每次发送网络请求时，都希望在界面上显示一个请求图标。
2.某些网络请求（比如登录（token）），必须携带一些特殊信息。
在这里插入图片描述
1.全局拦截axios.interctptors
2.instance为发送请求的对象

//拦截请求
    instance.interceptors.request;
    //拦截响应
    instance.interceptors.response;

拦截器的使用

instance.interceptors.request.use(config => {
        console.log(config);
        return config
    }, err => {
        console.log(err);
    })

注意
如果不写 return config，则不会打印请求结果。会打印错误类型
在这里插入图片描述

// 2.2拦截响应
    instance.interceptors.response.use(res => {
        console.log(res.data);
        return res.data
    }, err => {
        console.log(err);
    })

注意
1.如果不返回响应结果，前面用到响应数据的地方，会报undefined
在这里插入图片描述

anxios完整的使用流程

request.js

//引入框架
import axios from 'axios'

export function request(config) {
    //1.创建axios的实例
    const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        })
        //2.axios的拦截器
        //   2.1拦截请求
       instance.interceptors.request.use(config => {
            console.log(config);
            return config
        }, err => {
            console.log(err);
        })
        // 2.2拦截响应
    instance.interceptors.response.use(res => {
        console.log(res.data);
        return res.data
    }, err => {
        console.log(err);
    })


    //3.发送真正的网络请求
    return instance(config)
}

使用request的文件

//引入封装好的文件
import { request } from './network/request'

//最终的请求方式的使用
request({
    url: '/home/multidata'
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})
～东北大呲花 ～
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础知识学习（持续更新）
dayu199804的博客
05-05 2288
vue学习笔记
配置anxios拦截器打印请求参数和返回参数
lian1112880的博客
04-20 371
配置anxios拦截器打印请求参数和返回参数 – main.ts。
2024年最新【vue2】axios请求与axios拦截器的使用详解(1)，三面美团前端岗
最新发布
2401_84618926的博客
05-15 944
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
并发编程-异步查询,CountDownLatch,wait,notify解析以及实战
a1013893774的博客
04-28 2813
在写代码之前,我们先来想想两个问题: 什么是异步查询? wait,notify有什么作用? 首先来说说 “什么是异步查询” : 在之前的世纪中,大多数项目都还是单体应用,并且很少会用到多线程,而且在jdk1.5之前线程效率并不高,所以大多数都还是用的同步,很少会很用异步. 异步查询指的是: 开启另外一条线程去数据库里面查询数据,而主线程则做一些别的操作,比如说 服务器端收到客户端的查询请求,...
anxios和fetch数据请求
Zzzzsg_的博客
05-25 1568
anxios 使用别人封装好的第三方库：目前最流行的，使用率最高的是 axios axios得到的结果会进行一层封装，而fetch会直接得到结果 axios {data: 3, status: 200, statusText: "OK", headers: {…}, config: {…}, …} config: {adapter: ƒ, transformRequest:...
anxios跨域请求解决办法
hi_mydear_yuaner的博客
04-08 1368
1，使用http-proxy-middleware中间件 2，安装http-proxy-middleware：【npm install http-proxy-middleware -save】; 3,在config的index里设置代理 proxyTable: { // 在这里配置如下代码 '/api': { target:'http://192.168.0.80:8080'...
vue-axios使用详解
08-30
Vue-Axios 使用详解 Vue-Axios 是一个基于 Axios 的 Vue.js 插件，用于在 Vue 项目中实现 HTTP 请求。下面是 Vue-Axios 的使用详解： 一、GET 请求 在 Vue-Axios 中，GET 请求可以使用 `axios.get()` 方法实现。...
一个简单的axios使用教程，安装、封装、使用
01-10
1. **Promise 支持**：Axios 使用 Promise API，使得异步操作更加简洁易读。 2. **拦截器**：你可以设置请求拦截器和响应拦截器，进行预处理或错误处理。 3. **数据转换**：Axios 自动将 JSON 数据转换为字符串，...
vue项目中axios使用详解
08-28
vue项目中axios使用详解 一、axios简介 axios是基于Promise的HTTP客户端，专门为浏览器和Node.js设计的异步HTTP请求库。它提供了一个简洁的API来发送HTTP请求，并且可以在浏览器和Node.js环境中使用。axios支持...
axios使用拦截器统一处理所有的http请求的方法.docx
01-12
下面是一个使用 Axios 拦截器的示例代码： ``` import axios from 'axios'; import store from '../../store'; const service = axios.create({ baseURL: 'https://test.api.rujiaowang.net', timeout: 5000 }); ...
vue框架搭建之axios使用教程
10-18
本文重点介绍axios如何配合vue搭建项目框架,文章给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
axios的学习
glmmglc的博客
11-25 250
1.网络模块的封装： -----------------axios 2.axios的基本使用： 1.npm install axios --save 2.导入axios的包 import axios from 'axios' axios({ url: 'http://123.207.32.32:8000/home/multidata' }).then(res => { console.log(res) }) 这里axios是支持promise的，也就是说axios的内部会自动的调用r
axios起步——介绍和使用 post请求
XSL_HR的博客
04-13 2万+
Axios起步入门——介绍与相关用例
axios的基本使用
qq_56088882的博客
08-03 7202
Axios是专注于的库。相比于原生的对象，axios。相比于jQuery，axios更加，只专注于网络数据请求。文档: https://github.com/axios/axios。
Axios使用方法详解，从入门到进阶
青春木鱼的博客
08-16 3万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
axios 使用详解
热门推荐
Baimoc
05-16 3万+
一、安装 cnpm install axios 二、使用 三种写法 // 第一种写法 axios.get('/query?name=tom').then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 第二种写法 axios.get('/query', { params: { name: 'tom' } })
axios使用
05-27
以上是 axios 的基本使用方法，使用时需要注意的是，axios 默认使用 JSON 格式传递数据，如果需要发送 FormData 数据，需要手动设置请求头，如下所示： ```javascript const formData = new FormData() formData....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值