Axios是什么？
Axios是一个基于promise的HTTP库，能够用在浏览器和node.js中
Axios的特点
- 从浏览器中创立XMLHttpRequests
- 从node.js创立https申请
- 反对Promise API
- 拦挡申请数据和响应数据
- 勾销申请
- 主动转换JSON数据
- 客户端反对进攻XSRF
如何引入？
应用npm引入
$ npm install axios应用bower引入
$ bower install axios应用cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>应用xhr封装ajax申请参数
//4.响应的json数据主动解析为js的对象/数组
function axios({
url,
method='GET',
params={},
data={}
}) {
//返回一个Promise对象
return new Promise((resolve,reject) => {
//解决method(转大写)
method = method.toUpperCase()
//解决query参数(拼接到url上) id=1&xxx=abc
/*
{
id: 1,
xxx: 'abc'
}
*/
let queryString = ''
Object.keys(params).forEach(key => {
queryString += `${key}=${params[key]}&`
})
if (queryString) {
// 去除最初的&
queryString = queryString.substring(0,queryString.length-1)
// 接到url
url += '?' + queryString
}
//1.执行异步ajax申请
//创立xhr对象
const request = new XMLHttpRequest()
//关上连贯(初始化申请,没有申请)
request.open(method, url, true)
//发送申请
if (method === 'GET' || method === 'DELETE') {
request.send() //异步的
}else if(method==='POST' || method === 'PUT'){
request.setRequestHeader('Content-Type','application/json;charset=utf-8')//通知服务器申请体的格局是
request.send(JSON.stringify(data)) //发送json格局的申请参数
}
//绑定状态的监听
request.onreadystatechange = function () {
//发送申请是异步的,绑定状态的监听为同步因而该函数放哪后面和前面都能够
if (request.readyState !== 4) {
return
}
// 如果响应状态码在[200,300]之间代表胜利,否则失败
//es6解构赋值
const {status, statusText} = request
//如果申请胜利了,调用resolve()
if (status>=200 && status<=299) {
// 筹备后果数据对象response
const response = {
data:JSON.parse(request.response), //响应体解析好的数据
status, //响应体的状态码
statusText //响应体对应的文本
}
resolve(response)
}else{
//如果申请失败了,调用reject()
reject(new Error('request error status is ' + status))
}
}
})
}指定默认配置
在文档中具备三个罕用的全局axios默认值：
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; //传入token
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';在发送前编码所有字符,此设置是默认设置。咱们罕用的设置是axios.defaults.baseURL,用于定义url地址，使得咱们在参数传递时，只传递参数对应参数即可。例:
// 指定默认配置
axios.defaults.baseURL = 'http://localhost:3000'
/* 1.GET申请：从服务器端获取数据 */
function testGet(){
axios({
url:'/posts',
params:{
id:1
}
}).then(response => {
console.log('/posts get',response.data)
})
}
/* 2.POST申请：向服务端去存储数据 */
function testPost() {
axios({
url:'/posts',
method:'post',
data:{title: "json-server4", author: "typicode4"}
}).then(response => {
console.log('/posts post',response.data)
})
}
/* 3.PUT申请：更新服务器曾经数据 */
function testPut() {
axios({
url:'/posts/4',
method:'put',
data:{title: "json-server5", author: "typicode5"}
}).then(response => {
console.log('/posts put',response.data)
})
}
/* 4.DELETE申请：删除服务器端的数据 */
function testDelete() {
axios({
url:'/posts/4',
method:'delete',
})
.then(response => {
console.log('/posts delete',response.data)
})
}自定义实例默认值
咱们为什么要设计自定义实例？
- 应接需要：我的项目中由局部接口须要的配置由另一部分须要的配置不一样
- 解决办法：创立2个新的axios实例，每个都有本人特有的配置，能够利用于不同要求的申请接口中。
const instance = axios.create({
baseURL : 'http://localhost:4000'
})
//应用instance发申请
instance({
url:'/xxx' //申请4000
})
instance.get('/xxx')
//创立第二个实例，用于更改不同的配置
const instance2 = axios.create({
baseURL:'htto://localhost:8081'
})
instance2({
url:'/yyy'
})
instance2.get('/yyy')申请拦截器
//增加申请拦截器(回调函数)
axios.interceptors.request.use(
config => {
//在发送申请申请之前会执行下列如下
console.log('request interceptor1 onResolved()')
return config
},
error =>{
//在发送申请失败会执行下列如下
console.log('request interceptor1 onRejected()')
return Promise.reject(error)
}
)
//增加响应函数
axios.interceptors.response.use(
response => {
//在响应数据胜利后会执行如下
console.log('response interceptor1 onResolved')
return response
},
function(error){
//在响应数据失败后会执行如下
console.log('response interceptor1 onRejected')
return Promise.reject(error)
}
)
// 发送申请
axios.get('http://localhost:3000/posts')
.then(response => {
console.log('data',response.data)
})
.catch(error => {
console.log('error',error.message)
})撤销申请
当咱们点击按钮进行发送申请的时候，如果此时申请正在发送中，而用户却不通晓，用户可能会反复点击按钮进行发送申请，此时咱们应用撤销申请，如果以后申请还正在响应，用户再次点击按钮则会勾销上次正在发送的申请，避免服务器接管多个申请，并屡次做出响应。
实例：
//定义拦截器模块
//增加申请拦截器
axios.interceptors.request.use((config) => {
//在筹备发申请前,勾销未实现的申请,使得反复点击时,勾销上次发送的申请
if (typeof cancel === 'function') {
cancel('勾销申请')
}
//给config增加一个cancelToken的配置
config.cancelToken = new CancelToken(function executor(c) { //c 是用于勾销以后申请的函数
// 保留勾销函数,用于之后可能须要勾销以后的申请
cancel = c;
})
return config
})
//增加响应拦截器
axios.interceptors.response.use(
//当响应胜利后，勾销在发送申请时增加的撤销函数
response => {
cancel = null
return response
},
error => {
if (axios.isCancel(error)) {
console.log('申请勾销的谬误',error.message)
//中断Promise链 下面要中断请求
return new Promise(() => {})
}else{ //申请出错了
cancel = null
// console.log('申请1失败了',error.message)
//将谬误向下传递
// throw error 上面要将谬误向下传递
return Promise.reject(error)
}
}
)
//引入CancelToken 构造函数
const CancelToken = axios.CancelToken;
let cancel //用于保留申请的函数
function getProduct1() {
axios({
url:'http://localhost:4000/products1',
}).then(
response => {
console.log('申请1胜利了',response.data)
},
error => {//只用于解决申请失败的状况,勾销申请的谬误不必
console.log('申请1失败了',error.message)
}
)
}强制撤销申请
/* 撤销申请 */
function cancelReq() {
// alert('勾销申请')
//执行勾销申请的函数
//没有点过发送数据的按钮,当点击过发送数据的按钮后cancel将会存储一个函数
//故须要在强制勾销申请时判断cancel是否是一个函数，如果是函数阐明还正在发送申请中
if (typeof cancel === 'function' ) {
cancel('强制勾销申请')
} else{
console.log('没有可勾销的申请')
}
}以上为axios的总结啦，有帮忙的话就点个赞呗！
具体利用也能够到官网文档进行查看官网中文文档
发表回复