速成axios

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);