axios学习笔记

2024-06-29 01:43| 来源: 网络整理| 查看: 265

文章目录一、什么是axios?二、基本使用2.1 axiox请求方式三、全局配置3.1 并发请求和全局配置3.2 get请求四、axios的实例五、封装 axios六、拦截器6.1 请求拦截6.2 响应拦截七、常见的配置选项

一、什么是axios?

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。

Axios特性 1、可以在浏览器中发送 XMLHttpRequests

2、可以在 node.js 发送 http 请求

3、支持 Promise API

4、拦截请求和响应

5、转换请求数据和响应数据

6、能够取消请求

7、自动转换 JSON 数据

8、客户端支持保护安全免受 XSRF 攻击

二、基本使用

测试接口一：http://123.207.32.32:8000/home/multidata 测试接口二：

首先在我们的 vue项目中安装， npm install axios --save

//引入 axios import axios from 'axios' //默认是get 请求 axios({ //需要请求的URL地址 url: 'http://123.207.32.32:8000/home/multidata' }).then(res => { //输出请求成功的数据 console.log(res); }) axios({ url:'http://123.207.32.32:8000/home/data', // 专门针对get请求的参数拼接 prams:{ type:'pop', page:1 } }).then(res=>{ console.log(res); }) 2.1 axiox请求方式

axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])

三、全局配置

在上面的示例中, 我们的BaseURL是固定的事实上, 在开发中可能很多参数都是固定的. 这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

3.1 并发请求和全局配置 // 配置默认信息 axios.defaults.baseURL = 'http://123.207.32.32:8000' axios.defaults.timeout = 5000//超时时间毫秒 axios.all([axios({ url: '/home/multidata' }), axios({ url: '/home/data', prams: { type: 'sell', page: 5 } //axios.spread 对数组进行展开 })]).then(axios.spread((res1, res2) => { console.log(res1, res2); })); 3.2 get请求

在这里插入图片描述

四、axios的实例 // 4.创建对应的axios实例 const instace1 = axios.create({ baseURL:"http://123.207.32.32:8000", timeout:5000 }) instace1({ url:'/home/multidata' }).then(res=>{ console.log(res); }) instace1({ url:'/home/data', params:{ type:'pop', page:1 } }).then(res=>{ console.log(res); }) //实例2 const instace2 = axios.create({ baseURL:"http://120.53.120.229:8000", timeout:5000 }) 五、封装 axios import axios from 'axios' export function request(config) { // 1.创建axios的实例 const instance = axios.create({ baseURL: "http://123.207.32.32:8000", timeout: 5000 }) // 发送真正的网络请求 axios本身返回Promise 因此可以在外部 .then .catch return instance(config) }

使用：

在这里插入图片描述

六、拦截器

axios.interceptors //这样是拦截全局的

注意：不管是请求拦截，还是响应拦截，拦截了过后都需要返回否则前台获取不到数据。

6.1 请求拦截 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); // 1.比如config中的一些信息不符合服务器要求 // 2.比如发送网络请求时，都希望在界面中显示一个请求的图标 // 3.某些网络请求(登录(token)),必须携带一些特殊的信息 // 拦截下来了记得给返回出去 return config }, err => { console.log(err); }); // 3.发送真正的网络请求 axios本身返回Promise return instance(config) } 6.2 响应拦截 import axios from 'axios' // 最终版本 export function request(config) { // 1.创建axios的实例 const instance = axios.create({ baseURL: "http://123.207.32.32:8000", timeout: 5000 }) // 2.2 响应拦截 instance.interceptors.response.use(res => { // console.log(res); return res.data }, err => { console.log(err); }) // 3.发送真正的网络请求 axios本身返回Promise return instance(config) }

在这里插入图片描述

七、常见的配置选项

请求地址

url: '/user',

请求类型

method: 'get',

请根路径

baseURL: 'http://www.mt.com/api',

请求前的数据处理

transformRequest:[function(data){}],

请求后的数据处理

transformResponse: [function(data){}],

自定义的请求头

headers:{'x-Requested-With':'XMLHttpRequest'},

URL查询对象

params:{ id: 12 },

查询对象序列化函数

paramsSerializer: function(params){ } request body data: { key: 'aa'},

超时设置s

timeout: 1000,

跨域是否带Token

withCredentials: false,

自定义请求处理

adapter: function(resolve, reject, config){},

身份验证信息

auth: { uname: '', pwd: '12'},

响应的数据格式 json / blob /document /arraybuffer / text / stream

responseType: 'json',

【本文地址】

公司简介

联系我们