Axios是什么？
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中
Axios的特点
- 从浏览器中创建XMLHttpRequests
- 从node.js创建https请求
- 支持Promise API
- 拦截请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
如何引入？
使用npm引入
$ npm install axios使用bower引入
$ bower install axios使用cdn引入
使用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的总结啦，有帮助的话就点个赞呗！
具体应用也可以到官方文档进行查看官方中文文档