一、axios基础

1、什么是axios？

2、axios的安装

3、axios常用配置项

4、axios和ajax的区别

二、使用axios发送请求

1、发送get无参请求

2、发送get有参请求

3、发送post无参请求

4、发送post有参请求

4.1 发送json格式的数据：

4.2 发送表单格式的数据：

三、 then、catch、finally

四、axios快捷方法

五、axios实例

六、axios的全局配置

七、axios拦截器

八、 axios并发请求

九、axios二次封装

一、axios基础

1、什么是axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。jQuery中也封装了axios机制，但是仅适用于浏览器。

axios功能特点:

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
自动转换 JSON 数据

2、axios的安装

使用npm

npm install axios

使用cdn

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>

3、axios常用配置项

只有url选项式必须的，其他的都是可选，这里只列出一些常用配置项，axios还有很多其他的配置项，可以去axios官网查看。

axios({// 请求路径url:"",// 请求方式,默认发送get请求method:"",// get请求携带的参数写在params中params:{},// post请求携带的参数写在data中data:{},// 请求头headers:{},// 表示请求超过timeout时间没有响应就中断 (单位为毫秒)timeout:1000,// 规定后端返回的数据格式,默认值是jsonresponseType: 'json'
})

注意：method默认值为get，因此发送get请求时可以不写methods，responseType默认值为json

4、axios和ajax的区别

ajax特点:
   1、ajax是异步的XML和JavaScript
   2、可以运行浏览器不可以运行在node
   3、发送给后台数据需要手动转换，请求头需要手动设置
   4、后端响应的数据需要自己转换成js对象格式（后台相应数据为json格式）
axios特点:
   1、axios是基于promise的http库
   2、可以调用promise的api
   3、axios默认发送就是get请求，发送数据默认格式为json
   4、axios请求头的数据格式会自动转换

二、使用axios发送请求

1、发送get无参请求

axios({url:'请求地址'
})

2、发送get有参请求

发送get有参请求时，参数是以查询字符串的格式拼接到url地址中的。

我们把get请求需要携带的参数放到params中，axios会自动将它们转成查询字符串。

axios({url:'请求地址',// 将要传给后端的数据放到params中,axios会自动将它们转成查询字符串 (即 ?a=1&b=2)params:{a:1,b:2}
})

3、发送post无参请求

axios({url:'请求地址',method:'post'
})

4、发送post有参请求

4.1 发送json格式的数据：

使用post请求默认发送的数据格式是json格式

axios({url:"请求地址",method:"post",// 在请求头中指明发送的数据是json格式的数据,但是这里不写也可以,因为post请求默认发送的数据格式就是json // headers:{//   "Content-Type":"application/json"// },data:{a:1,b:2}
})

4.2 发送表单格式的数据：

使用Qs工具将表单格式数据转成json格式的数据，需要先引入Qs：

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>

axios({url:"请求地址",method:"post",// 在请求头中指明发送的数据是表单格式的数据,但是这里不写也可以,因为axios请求头的数据格式会自动转换 headers:{// "Content-Type":"application/x-www-form-urlencoded",// 如果需要token认证,可以在请求头中携带"Authorization":token},// 这里使用Qs将表单格式的数据转成json格式数据传给后台,因为后台需要接收json格式的数据data:Qs.stringify({a:1,b:2})
})

三、 then、catch、finally

因为axios 是一个基于 promise 的 HTTP 库，因此它支持promise的api，我们可以在axios中使用then、catch、finally方法。

axios({url:"请求地址",method:"post",headers:{"Authorization":token},data:Qs.stringify({a:1,b:2})
}).then(res=>{console.log(res,'获取响应');
}).catch(err=>{console.log(err,'打印错误信息');
}).finally(()=>{console.log('最终执行');
})

四、axios快捷方法

axios提供了以下一些快捷方法：（中括号里面的表示可选参数，config配置对象和axios是一样的）

axios.request(config) -->等同于 axios(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]]) -->data表示要传递的参数

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

get、delete、head、options使用方法一致，post、put、patch使用方法一致。

（post 和 put：用来保存多条表单数据；patch：用来保存一条表单数据）

// 1、get无参请求
axios.get('请求地址').then(res=>{console.log(res);
})//----------------------------------------// 2、get有参请求
let url = '请求地址'
axios.get(url,{params:{a:1,b:2},timeout:2000
}).then(res=>{console.log(res);
})//----------------------------------------// 3、post有参请求
// 3.1 json格式数据
let url = '请求地址'
let data = {a:1,b:2
}
axios.post(url,data).then(res=>{console.log(res);
})//----------------------------------------// 3.2 表单格式的数据
let url = '请求地址'
let data = {a:1,b:2
}
axios.post(url,Qs.stringify(data),{headers:{"Authorization":token}
}).then(res=>{console.log(res);
})

五、axios实例

创建axios实例：
axios.create([config])

// 创建实例
let instance = axios.create({baseURL: '基础路径',timeout: 2000,headers:{"Authorization": token}
})
// 使用实例
instance.post('除去基础路径后剩下的路径',{a:1,b:2
}).then(res=>{console.log(res);
})

六、axios的全局配置

全局配置axios默认配置项：给所有axios请求都添加一些默认配置项

axios.defaults.baseURL = '基础路径';
axios.defaults.headers.common['Authorization'] = token;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

七、axios拦截器

axios给我们提供了两大类拦截器：

一种是请求拦截器，请求方向的拦截（成功请求，失败请求）；

另一种是响应拦截器，响应方向的（成功响应，失败响应）

拦截器的作用：用于我们在网络请求的时候在发起请求或者响应时对操作进行相应的处理。

//请求拦截器 对所有的axios请求做一个拦截
axios.interceptors.request.use(config=>{// 在发送请求之前做些什么return config},error=>{// 对请求错误做些什么return Promise.reject(error)}
);// 响应拦截器 对响应数据处理
axios.interceptor.response.use(response=>{// 对响应数据做点什么return response},error=>{// 对响应错误做点什么return Promise.reject(error)}
)

使用：

发送请求时，如果不是登录接口，需要携带token，那么我们可以在请求拦截器中做相应操作，响应拦截器主要用来对响应数据进行提取，因为响应拦截器返回的response是axios封装后的数据，而response.data才是后端返回的响应数据。

//请求拦截器
axios.interceptors.request.use(config=>{// 在发送请求之前做些什么if(config.url!=='登录接口'){// 需要携带token 每一个请求请求头需要携带tokenconfig.headers.Authorization='token值';}return config},error=>{// 对请求错误做些什么return Promise.reject(error)}
);
// 响应拦截器
axios.interceptor.response.use(response=>{// 对响应数据做点什么// response.data才是后端返回的响应数据，response是axios封装后返回的数据let res = response.data;return res},error=>{// 对响应错误做点什么return Promise.reject(error)}
)axios.post('请求地址',{a:1,b:2
}).then(res=>{console.log(res);
});

八、 axios并发请求

使用axios并发请求可以一次性发送多个异步请求。

处理并发请求的助手函数：

axios.all(iterable)

axios.spread(callback)

axios.all([axios.get(),axios.get(),axios.post()
]).then(axios.spread((res1,res2,res3)=>{console.log(res1,res2,res3); //依次打印每一个响应})
)

axios.all([axios.get(),axios.get(),axios.post()
]).then(res=>{console.log(res) //打印一个数组，包含上述三个请求的响应结果
})

九、axios二次封装

我们在vue-cli脚手架中实现对axios的二次封装。

下载axios

-S 表示在生产环境下安装

cnpm i -S axios

下载Qs

cnpm i -S qs

在src下新建文件夹utils，utils文件夹下新建文件request.js

src/utils/request.js

import axios from 'axios'
import Qs from 'qs'
let qs = Qs// 创建axios实例对象
let instance = axios.create({baseURL:"基础路径",timeout:5000
})// 请求拦截器
instance.interceptors.request.use(config=>{// console.log(config,'请求配置项');if(config.url !== '登录接口'){config.headers.Authorization = 'token值'}return config
},error=>{alert('请求失败')return Promise.reject(error)
})// 响应拦截器
instance.interceptors.response.use(response=>{let res = response.datareturn res
},error=>{return Promise.reject(error)
})// 封装get方法并导出
export function get(url,params){return instance.get(url,{params,})
}
// 封装postJSON方法 (发送json格式数据)
export function postJSON(url,data){return instance.post(url,data)
}
// 封装post方法 (发送表单格式数据)
export function post(url,data){return instance.post(url,qs.stringify(data))
}// 导出axios实例
export default instance

使用：

src/views/AboutView.vue

src/views/HomeView.vue

axios介绍以及对axios进行二次封装相关推荐

Vue二次封装axios为插件使用
照例先贴上 axios 的 gitHub 地址不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-re ...
vue全家桶 ---axios的使用和二次封装
1.前提基础本文在vue项目搭建的基础上,vue-router路由配置的基础上,对vue项目中axios的使用进行介绍. 2.axios的使用以及拦截器的设置. 安装axios cnpm i axi ...
原生 Ajax 封装和 Axios 二次封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
vue：axios二次封装，接口统一存放
https://www.jianshu.com/p/9077baa9d543 一.基于框架:vue 二.基于http库:axios 三.基本用法: 1.通过node安装: npm instal ...
axios的二次封装与async,await的配合使用?
前言:前些日子读文章,说是vue3.0会在明年下半年正式推出,改动的地方好像也不少,比如说vue3.x的代码库将会用typescript编写,并提供改进的 TypeScript 支持.变化还是很快的, ...
axios的一封装和二次封装
在做axios请求的时候还是有一个后端服务器地址比较好,这是自己搞的一个简易的后端,小白一枚,不要喷我哦指令是: 全局指令: npm install express-generator -g 局部指 ...
面试官：为啥要axios 的二次封装呢及其使用是干啥的
一.为什么要进行封装通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加.api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护. 举个例子,当axios发生问题存在重 ...
axios如何二次封装
axios二次封装的五种方法为什么要封装 axios 的 API 很友好,你完全可以很轻松地在项目中直接使用. 不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间.设置请求 ...
axios进行二次封装
Web开发中,我们最常用的HTTP库就是Axios了,它的底层基于Ajax进行封装,在浏览器端和服务端都可以使用.如果大家对一些API不是很熟悉可以参考官方地址,或者中文社区. 为什么要对ax ...

axios介绍以及对axios进行二次封装

一、axios基础

1、什么是axios？

2、axios的安装

3、axios常用配置项

4、axios和ajax的区别

二、使用axios发送请求

1、发送get无参请求

2、发送get有参请求

3、发送post无参请求

4、发送post有参请求

4.1 发送json格式的数据：

4.2 发送表单格式的数据：

三、 then、catch、finally

四、axios快捷方法

五、axios实例

六、axios的全局配置

七、axios拦截器

八、 axios并发请求

九、axios二次封装

axios介绍以及对axios进行二次封装相关推荐

最新文章

热门文章

axios介绍以及对axios进行二次封装

一、axios基础

1、什么是axios？

2、axios的安装

3、axios常用配置项

4、axios和ajax的区别

二、使用axios发送请求

1、 发送get无参请求

2、 发送get有参请求

3、 发送post无参请求

4、 发送post有参请求

4.1 发送json格式的数据：

4.2 发送表单格式的数据：

三、 then、catch、finally

四、axios快捷方法

五、axios实例

六、axios的全局配置

七、axios拦截器

八、 axios并发请求

九、axios二次封装

axios介绍以及对axios进行二次封装相关推荐

最新文章

热门文章

1、发送get无参请求

2、发送get有参请求

3、发送post无参请求

4、发送post有参请求