Axios
大家好,又到了我们学习新东西的时候了,今天我们来了解一下现在市场上最主流的发送ajax请求的插件咯
了解一个插件的第一步肯定是去它的官网逛逛咯
从它的主页就可以看出axios是基于promise异步,适用于浏览器和node.js
ajax的前世今生
对于我们来说忘什么都不能忘本呐,即便axios再怎么好用也不能把我们js的原生ajax请求给忘了叭,不过忘了也影响不大,刚好来我这复习一下
我之前的博客对原生ajax有过详细的介绍,链接放下面 ,就回到我们的主题吧
原生ajax详细介绍
axios的使用方式
工作流程
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
引入方式
//直接使用npm下载
npm install axios
//或者使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
怎么使用
以vue举例
1.直接将axios 写入vue原型链
//导入axios
import axios from 'axios'
//添加到原型链
Vue.prototype.$http = axios
这样在任何组件都可以使用到axiosle
使用方式 this.$http
2.将axios单独写在一个js文件,接口分别暴露,使用的时候在组件里导入对应的方法
-------------api.js--------------------------------------
import axios from "axios";
const http = axios.create({
//开始路径
baseURL:'http://127.0.0.1/api',
//超时时间
timeout:16000
})
export const getUserName = function (LoginForm) {
return https.post("login", LoginForm)
}
export const getMenuList = function () {
return https.get("menus")
}
-------------------需要调用接口的组件------------
import {getUserName}from "./api.js";
总结
我们一般都会使用后面的那种方式去进行调用接口
原因:接口函数的集中管理便于后期维护,减少不必要的麻烦
axios的常用的api
配置axios实例
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://127.0.0.1/api',
timeout: 5000,
headers: {
'Content-Type': 'application/json',
},
});
- baseURL:设置统一初始路径
- timeout:设置请求的超时时间
- headers:设置请求的请求头
axios的请求使用方法
1.使用axios()方法
method:ajax的请求方式
url:请求路径
data:请求发送的数据
headers:自定义请求头
axios({
method: 'post',
url: '/user/12345',
// 自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
2.请求方式别名
这种方式使用方便,简单
缺点:不可以个性化定制配置
axios.get(url[, config])
axios.delete(url[, config])
| 请求方式 | 请求作用 | 参数传递方式 |
|---|---|---|
| get | 从服务器获取数据 | 通过URL传参数 |
| post | 向服务器推送数据 | 使用请求主体的方式向服务器传递内容 |
| put | 给服务器上增加资源文件 | 使用请求主体的方式向服务器传递内容 |
| delete | 从服务器上删除资源文件 | 向服务器传输内容方式与get一致 |
其实GET和POST的区别挺大的,在传值大小,缓存,安全上都有区别,同学们有时间 可以自行去扩展
发送post请求
举例
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
发送请求可以配合 .then .catch使用,或者使用async/awit解决异步
并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);
// OR
Promise.all([getUserAccount(), getUserPermissions()])
.then(function ([acct, perm]) {
// ...
});
利用 romise.all()方法多请求一起发送,全部请求成功后才返回成功
拦截器
添加拦截器
请求拦截器 在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；
响应拦截器 同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
既然可以添加拦截器,那么就能移除拦截器咯
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
