java axios干啥用的,一个简单的axios使用

什么是axios？

axios是基于promise的Http客户端，简单来讲就是可以通过axios来向后台发送请求，并在请求中做更多的可控功能！由于没有具体的翻译，个人理解的axios的名称由来：ajax i/o system

文档网站

axios的特点

在浏览器中创建 XMLHttpRequests请求

在node中发送http请求

支持promise api

拦截请求数据和响应数据

取消请求

自动转换为JSON格式

客户端支持防御XSRF

axios--post和get

1.get 请求：

image.png

2.post请求：

image.png

并发请求

1.使用axios.all()来处理并发请求，可以放入多个请求数组

2.axios.all([axios.get('/user/12'),axios.post('/user/34',{config})])返回的是一个数组,使用axios.spread可以将数组展开：[arr1,arr2]==>arr1,arr2

image.png

全局配置

事实上在开发中很多参数都是固定的，这个时候可以进行抽取，利用axios的全局配置axios.defaults

axios.defaults.baseURL = '123.207.32.32:8000'

axios.defaults.timeout = 5000

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

axios实例

为什么创建实例，原因是当我们axios模块中导入对象时，使用的是默认的实例，当给这些实例设置默认配置时这些配置就被固定下来了，但后续开发中某些配置或许会不一样，如timeout，content-Type等，这时我们就可以创建新的实例，并传入属于该实例的配置信息

image.png

image.png

拦截器

1.axios请求拦截器：axios.interceptors.requset.use(callback(config))

2.axios响应拦截器：axios.interceptors.response.use(callback(response))

3.实例请求拦截器：instenceAxios.interceptors.requset.use(callback(config))

4.实例响应拦截器：instenceAxios.interceptors.response.use(callback(response))

image.png

封装axios

为什么要对axios进行封装了，原因是如果在项目中对一个第三方库过于依赖的话，当第三方库不进行更新的维护的时候，那么我们的项目更换另一个库或者进行维护会很难，所以我们对axios进行封装，遇到这样的情况就可以只针对我们封装的东西进行修改就行！

//requset.js

//第一步，引入axios模块

import axios from 'axios'

//导出封装函数

expoet default function request(config){

//创建实例

const instance = axios.create({

baseURL = '127.168.0.0.1:8000' ,

timeout = 5000

})

//创建请求拦截器

instance.interceptors.request.use(config=>{

//dosomething

return config

},error=>{

//do something

console.log(error)

})

//创建响应拦截器

instence.interceptors.response.use(res=>{

//do something

return res

},error=>{

console.log(error)

})

//返回该实例，发送真正的请求

return instance(config)

}

可以对网络请求针对不同的页面数据进一步封装，这样就不会显得过于耦合，request.js也不会很臃肿

//home.js

import request from 'request.js'

export homeRequset(type,age){

return request({

url:'/user',

params:{

type,age

}

})

}